tag:code.tutsplus.com,2005:/posts
Envato Tuts+ Code
2024-03-21T13:52:00Z
tag:code.tutsplus.com,2005:PostPresenter/cms-108609
2024-03-17T18:55:37+00:00
How to Build a Text-to-Voice Application With JavaScript
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#imd7{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="izfx"><p>This tutorial will cover how to convert text into speech using JavaScript using <code>WebSpeechAPI</code>. It will feature a simple interface where the user adds the text to be spoken, then clicks a button to generate the corresponding speech.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idbi">
<h2 id="toc-mjg7-our-text-to-speech-demo">Our Text-to-Speech Demo</h2>
<p>Here’s what we’re going to build. Type anything you want in the textarea, select the language you’ve written it in, and click the button to hear the result!</p>
<p><iframe src="https://codepen.io/tutsplus/embed/zYXBLyb?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="imd7"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ikg1">
<h2 id="toc-e01x-introduction-to-the-webspeechapi"><span>A Quick Introduction to the WebSpeechAPI</span></h2>
<p>Before we build anything, let’s quickly get acquainted with the API we’ll be using.</p>
<p>The <code>WebSpeechAPI</code> is a JavaScript API that allows developers to add voice functionality to web applications. It consists of the <code>speechSynthesis</code> component, which enables text-to-voice conversion. <code>SpeechSynthesis</code> allows you to pass text content and other optional parameters such as language, pitch, rate, and voice.</p>
<p>It also has several methods for starting, pausing, resuming, and canceling. To generate voice from text, the first thing is to create an instance of the <code>SpeechSynthesisUtterance</code> component like this: </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">utterance</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">SpeechSynthesisUtterance</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr></tbody></table></div>
<p><code>SpeechSynthesisUtterance</code> is the part which represents the text you want the system to say. The next step is to specify the text content using the text property like this;</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">text</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">Hello world</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr></tbody></table></div>
<p>Here we want the computer to say the words "Hello world". </p>
<p>Finally, call the <code>speak()</code> method, which will speak the given utterance (<code>SpeechSynthesisUtterance</code> object) defined above.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">speechSynthesis</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">speak</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr></tbody></table></div>
<p>We can also set a language, for example, English -US, </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">lang</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">'</span><span style="color: #90a959">en-US</span><span style="color: #90a959">'</span>
</pre></td>
</tr></tbody></table></div>
<p>If you don’t pass a language to the <code>SpeechSynthesisUtterance</code> constructor, the default language configured by the browser will be applied. </p>
<p>The <code>SpeechSynthesis</code> controller also provides a <code>getVoices()</code> method, which returns a list of system-supported voices for the current device, allowing users to choose a custom voice.</p>
</div></div></div><div data-content-block-type="Wysi" id="iu8f" class="content-block-wysi content-block">
<h2 id="toc-0jim-html-structure"><span>HTML Structure</span></h2>
<p><span>Okay, let’s start building. The HTML Structure will consist of the following elements:</span></p>
<ul>
<li><span>a <code><textarea></code> for the text to be converted.</span></li>
<li><span>A <a href="https://webdesign.tutsplus.com/html-element-select--cms-93261a" target="_self"><code><select></code></a> element. Inside the select element, we will populate language options.</span></li>
<li><span>A generate <a href="https://webdesign.tutsplus.com/html-element-button--cms-93837a" target="_self"><code><button></code></a> which, when clicked, will speak the text content provided.</span></li>
</ul>
<p>To keep us focused on functionality, we’ll use <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a> to build the interface. Ensure you add the Bootstrap CDN link in your header like this: </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><link</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">rel=</span><span style="color: #90a959">"stylesheet"</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">integrity=</span><span style="color: #90a959">"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">crossorigin=</span><span style="color: #90a959">"anonymous"</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">/></span>
</pre></td>
</tr>
</tbody></table></div>
<p><span>Add the HTML Structure.</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"message alert alert-warning"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"alert"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h1></span>Text to Voice Converter<span style="color: #f4bf75"></h1></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><form></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"form-group"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"text"</span><span style="color: #f4bf75">></span>Enter your text:<span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><textarea</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"text"</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"content form-control form-control-lg"</span> <span style="color: #6a9fb5">rows=</span><span style="color: #90a959">"6"</span><span style="color: #f4bf75">></textarea></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"form-group"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"voices"</span><span style="color: #f4bf75">></span>Choose your language:<span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><select</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"select-voices form-control form-control-lg"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"voices"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></select></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"convert btn btn-primary"</span><span style="color: #f4bf75">></span>🔊 Convert Text to Voice<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></form></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-rogm-additional-styling-with-css">Additional Styling with CSS</h2>
<p>Bootstrap handles pretty much all the styling for us. But let’s add some custom CSS properties to our design. These will give us a custom font, a container, some extra spacing for the elements in the form, and a rule to hide our alert message.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">@import</span> <span style="color: #90a959">url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap")</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">body</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-family</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"DM Mono"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">monospace</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.container</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">600px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2rem</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.form-group</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2rem</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">label</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.message</span><span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>We have set <code>display:none</code> to the alert component so that it will only appear if there are error messages to display.</p>
<h2 id="toc-116q-javascript-functunality">JavaScript Functionality</h2>
<p>As I explained in the introduction, we can obtain voices using the <code>speechSynthesis.getVoices()</code> method; let’s start by getting and storing them in an array like this.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">voices</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">[</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google Deutsch</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">de-DE</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google US English</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">en-US</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google UK English Female</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">en-GB</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google UK English Male</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">en-GB</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google español</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">es-ES</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google español de Estados Unidos</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">es-US</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google français</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">fr-FR</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google हिन्दी</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">hi-IN</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google Bahasa Indonesia</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">id-ID</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google italiano</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">it-IT</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google 日本語</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">ja-JP</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google 한국의</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">ko-KR</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google Nederlands</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">nl-NL</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google polski</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">pl-PL</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google português do Brasil</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">pt-BR</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google русский</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">ru-RU</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google 普通话(中国大陆)</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">zh-CN</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google 粤語(香港)</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">zh-HK</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Google 國語(臺灣)</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">lang</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">zh-TW</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">];</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-o59l-identify-the-required-elements">Identify the Required Elements</h3>
<p>Next, use the Document Object Model (<a href="https://webdesign.tutsplus.com/what-is-the-dom-api-for-javascript--cms-35650a" target="_self">DOM</a>) to obtain the alert, select, and button elements.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">optionsContainer</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.select-voices</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">convertBtn</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.convert</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.message</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-j7ii-create-voices-selection">Create Voices Selection</h3>
<p>The <code>optionsContainer</code> represents the <code><select></code> element for the drop-down list of voices from which the user will select an option.</p>
<p>We want to populate it with the voices from the voices array. Create a function called <code>addVoices()</code>.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">addVoices</span><span style="color: #d0d0d0">(){</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #949494">// populate options with the voices from array
</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Inside the function, use the <code>forEach()</code> method to loop through the voices array, and for each voice object, set <code>option.value = voice.lang</code> and <code>option.text = voice.name</code>, then append the option to the select element.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">addVoices</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">voices</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">voices</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">voice</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">option</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">voice</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">lang</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">voice</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionsContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">voice</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">lang</span> <span style="color: #d0d0d0">===</span> <span style="color: #90a959">"</span><span style="color: #90a959">en-US</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">selected</span> <span style="color: #d0d0d0">=</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>We need to invoke the <code>addVoices()</code> function to apply the functionality, however, for the Chrome browser, we need to listen to the <code>voiceschanged</code> event and then call the <code>addVoices()</code> function. So we’ll add a condition: </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">navigator</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">userAgent</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">indexOf</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">Chrome</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">!==</span> <span style="color: #d0d0d0">-</span><span style="color: #90a959">1</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">speechSynthesis</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">voiceschanged</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">addVoices</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span> <span style="color: #aa759f">else</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">addVoices</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The <code>voiceschanged</code> event is a JavaScript event fired when the list of available speech synthesis voices changes. The event happens when the list of available voices is ready to use.</p>
<h3 id="toc-j0s9-button-event-listener">Button Event Listener</h3>
<p>Add a click event listener to the generate button.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">convertBtn</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">// display an alert message if content is empty
</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">// pass the arguments to convertToSpeech()
</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Inside the event listener function, we want to display an alert if the content is not provided, get the text from the textarea, get the selected language, and pass the values to the <code>convertToSpeech()</code> function.</p>
<p>Update the event listener as follows.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">convertBtn</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">convertText</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.content</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">convertText</span> <span style="color: #d0d0d0">===</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959"> Please provide some text</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">style</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">display</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">block</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">setTimeout</span><span style="color: #d0d0d0">(()</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">style</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">display</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">none</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span> <span style="color: #90a959">2000</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">selectedLang</span> <span style="color: #d0d0d0">=</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionsContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">options</span><span style="color: #d0d0d0">[</span><span style="color: #d0d0d0;background-color: #151515">optionsContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">selectedIndex</span><span style="color: #d0d0d0">].</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">convertToSpeech</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">convertText</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">selectedLang</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Create the <code>convertToSpeech()</code> function and add the code below.</p>
<div>
<div>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">convertToSpeech</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">text</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">lang</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0">!</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">speechSynthesis</span><span style="color: #90a959">"</span> <span style="color: #aa759f">in</span> <span style="color: #d0d0d0;background-color: #151515">window</span><span style="color: #d0d0d0">))</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959"> Your browser is not supported, try another browser</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">messageContainer</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">style</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">display</span> <span style="color: #d0d0d0">=</span><span style="color: #90a959">"</span><span style="color: #90a959">block</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">utterance</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">SpeechSynthesisUtterance</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">lang</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">lang</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">text</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">text</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">speechSynthesis</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">speak</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">utterance</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
</div>
</div>
<p>The <code>covertToSpeech()</code> function will take the two parameters, i.e., the text to be converted and the language the text should be spoken in.</p>
<p>Let’s break it down:</p>
<ul>
<li>First, we will check if the browser supports speech synthesis; if it doesn't, we will display the message <strong>“Your browser is not supported; try another browser”</strong>
</li>
<li>If speech synthesis is supported, we will create a new <code>SpeechSynthesisUtterance</code> instance and assign it to the variable utterance.</li>
<li>Then we apply the text to the speech request with <code>utterance.text</code> and the language with <code>utterance.lang</code>.</li>
<li>Finally, the browser will speak the text using <code>speechSynthesis.speak(utterance)</code>.</li>
</ul>
<h2 id="toc-fpdg-conclusion">Conclusion</h2>
<p>I hope you enjoyed this tutorial and learned something useful! We covered everything you need to create text-to-voice apps by leveraging the capabilities of <code>WebSpeechApi</code>. Incorporating text-to-voice functionality in your application will cater to diverse user needs and will improve its overall accessibility.</p>
<p>Let’s remind ourselves what we created:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/zYXBLyb?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/108609/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108609/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108609/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108609/a2t.img" width="1" /></div>
2024-03-21 13:52:00 UTC
2024-03-21 13:52:00 UTC
Esther Vaati
tag:code.tutsplus.com,2005:PostPresenter/cms-108537
2024-02-28T09:04:43+00:00
Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iv7h"><p>In this tutorial, we’ll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS units.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixyt"><p>Hero or full-screen sections are an integral part of UI design. They exist in different kinds of websites, from landing pages to portfolio websites, and aim to grab visitors’ attention in the first place. Common parts of a hero section are slideshows, images, videos, headlines, texts, call-to-action links, etc. </p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irci">
<figure class="post_image"></figure>
<figure class="post_image"></figure>
<h2 id="toc-uwgl-100vh">100vh</h2>
<p>Over recent years, the easiest way to create a full-screen section has been to give it a height of <code>100vh</code>, assuming its width is equal to the viewport width. </p>
<figure class="post_image"><a href="https://caniuse.com/?search=vh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="870px" height="356px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="650px" height="269px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="380px" height="162px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"></a>
<figcaption>Current support for vh</figcaption>
</figure>
<p>On desktop browsers, everything works as expected.</p>
<p>However, on mobile browsers, full-screen sections aren’t visible entirely by default. We can see them all only as we scroll, when the floating address bar of the user agent gets shrunk. Note that the address bar’s position can appear either on top or bottom.</p>
<p>This can lead to a bad user experience if, for example, our sections include vertically centered content or content like call-to-actions that sit at its bottom position and thus is initially semi-visible by the visitors.</p>
<p>To demonstrate that behavior, I’ve created a <a href="https://tutsplus.github.io/viewport-relative-css-units/" target="_blank" rel="noopener">GitHub page</a> that contains a full-screen section with a background image and vertically centered content.</p>
<p>Go ahead and visit that page from your mobile device. You’ll notice that the hero image isn’t fully visible by default.</p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="870px" height="793px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="650px" height="593px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="380px" height="347px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"></p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">There’s also a <a href="https://tutsplus.github.io/viewport-relative-css-units/sticky.html" target="_self">link to a second page</a> that includes a sticky header.</div>
</div>
<p>Thankfully, modern CSS provides some <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" target="_blank" rel="noopener">new viewport-relative units</a> with great browser support (more than 90% at the time of writing) that help us solve this issue without relying on JavaScript solutions. Their behavior is the same as the <code>100vh</code> on desktop browsers, as there aren’t any dynamic UA interfaces. Their behavior differs on mobile devices.</p>
<h2 id="toc-80aa-dvh">100dvh</h2>
<p>The first of these units is the dynamic viewport height unit (<code>dvh</code>).</p>
<p>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#dynamic-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</p>
<blockquote>
<p><span>The </span><span>dynamic viewport-percentage units</span><span>(</span><span>dv*</span><span>) are defined with respect to the </span><span>dynamic viewport size</span><span>: the viewport sized with dynamic consideration of any UA </span><span>interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</span></p>
</blockquote>
<p><span>The easiest way to understand its behavior is to revisit our page and </span><em><span>click</span></em><span> on the </span><code>dvh</code><span> button to apply <code>100dvh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=dvh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="870px" height="242px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="650px" height="185px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="380px" height="114px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"></a>
<figcaption>Current support for dvh</figcaption>
</figure>
<p>What you’ll notice is that, by default, the hero section will appear entirely. Then, as you scroll when the address bar collapses, it updates the section’s height and behaves like <code>100vh</code>.</p>
<p>Nevertheless, as this unit always tries to match the viewport height regardless of the toolbar’s presence, it causes an instant jump/flash on the scroll and thus a repositioning on our centered content—that certainly doesn’t make it an ideal replacement for <code>100vh</code> in most cases and can be disturbing to the user and/or costly in terms of performance. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="870px" height="789px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="650px" height="590px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="380px" height="346px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"></figure>
<h2 id="toc-gogj-100lvh">100lvh</h2>
<p>Next, we have the large viewport height unit (<code>lvh</code>).</p>
<p><span>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#large-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</span></p>
<blockquote>
<p><span>The </span><span>large viewport-percentage units</span><span>(</span><span>lv*</span><span>) and </span><span>default viewport-percentage units </span><span>(</span><span>v*</span><span>) are defined with respect to the </span><span>large viewport size</span><span>: the viewport sized assuming any UA </span><span>interfaces that are dynamically expanded and retracted to be retracted. This allows authors to size content such that it is guaranteed to fill the viewport, noting that such content might be hidden behind such interfaces when they are expanded.</span></p>
</blockquote>
<p><span>Again, the easiest way to understand its behavior is to revisit our page and </span><em><span>click</span></em><span> on the <code>lvh</code> </span><span>button to apply <code>100lvh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=lvh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="870px" height="248px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="650px" height="189px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="380px" height="117px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"></a>
<figcaption>Current support for lvh</figcaption>
</figure>
<p>What you’ll notice is that our section will behave exactly like when its height is set to <code>100vh</code>. That said, by default, the hero section won’t appear entirely, but will do when the address bar gets shrunk.</p>
<p>In other words, this unit will always return the largest, visible viewport height that will occur on the scroll when the toolbar is the smallest one—that certainly doesn’t make it an ideal replacement for <code>100vh</code> at the time of this writing as it doesn’t offer anything new. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="870px" height="787px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="650px" height="588px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="380px" height="345px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"></figure>
<h2 id="toc-wp29-100svh">100svh</h2>
<p>Finally, we have the small viewport height unit (<code>svh</code>).</p>
<p><span>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#small-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</span></p>
<blockquote>
<p><span>The </span><span>small viewport-percentage units </span><span>(</span><span>sv*</span><span>) are defined with respect to the </span><span>small viewport size</span><span>: the viewport sized assuming any UA </span><span>interfaces that are dynamically expanded and retracted to be expanded. This allows authors to size content such that it can fit within the viewport even when such interfaces are present, noting that such content might not fill the viewport when such interfaces are retracted.</span></p>
</blockquote>
<p>Once a<span>gain, please examine its behavior by revisiting our page and </span><em><span>clicking</span></em><span> on the <code>svh</code></span><span> button to apply <code>100svh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=svh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="870px" height="241px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="650px" height="184px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="380px" height="114px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"></a>
<figcaption>Current support for svh</figcaption>
</figure>
<p>What you’ll notice is that our section will always be visible and behave like the initial state (before scrolling) of the <code>100dvh</code>.</p>
<p>In other words, this unit will always return the smallest, visible viewport height that will occur when the toolbar is expanded—that certainly makes it an ideal replacement for <code>100vh</code> at the time of this writing. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="870px" height="787px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="650px" height="588px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="380px" height="345px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"></figure>
<h2 id="toc-boj2-fallback">Fallback</h2>
<p>If you’re satisfied with any of the previous units and want to use it but at the same time need a fallback to the <code>100vh</code> unit just to be safer, try something like this old-school CSS: </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.hero</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100</span><span style="color: #d0d0d0;background-color: #151515">svh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100vh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>In this way, non-supported browsers will ignore the first property value.</p>
<h2 id="toc-ixma-conclusion">Conclusion</h2>
<p>In this tutorial, we discussed the challenges of making truly full-screen sections across all devices when working with different viewport-relative units.</p>
<p>Let’s recap regarding the behavior on mobile browsers:</p>
<ul>
<li>Setting <code>100vh</code> or <code>100lvh</code> to a section will produce the same result. The section will have a fixed height (unless we resize the viewport), but we won’t be able to see it entirely unless we scroll and the address bar gets shrunk. </li>
<li>Setting <code>100dvh</code> to a section means that it won’t have a fixed height but will be recalculated as we scroll. As a result of that, elements inside that section might be repositioned. Its behavior can be useful under certain scenarios, but might be annoying for the user.</li>
<li>Setting <code>100svh</code> to a section means that it’ll always have a fixed height (unless we resize the viewport) that will be equal to the initial viewport height (before we scroll)—when the address bar is expanded. The section will be fully visible by default just like the initial state of <code>100dvh</code>. </li>
</ul>
<p>My recommendation, at this moment, is to create full-screen hero sections with <code>100svh</code> and have a fallback to <code>100vh</code>. </p>
<p>As always, thanks a lot for reading!</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/108537/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108537/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108537/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108537/a2t.img" width="1" /></div>
2024-03-05 13:12:00 UTC
2024-03-05 13:12:00 UTC
George Martsoukos
tag:code.tutsplus.com,2005:PostPresenter/cms-37732
2021-08-30T02:08:18+00:00
How to Fix a 500 Internal Server Error on Your WordPress Site
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="ivgl9">
<p><span>One minute your website is working. The next, you see an error message that looks like this: </span></p>
<p><em><span>“500 Internal Server Error”</span></em></p>
<p><span>Or:</span></p>
<p><em><span>“This page isn’t working.”</span></em></p>
<p><span>Or: </span></p>
<p><em><span>“HTTP ERROR 500”</span></em></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irb1">
<p><span>Unfortunately, this is one of those error codes that provides no information on the source of the problem. That said, troubleshooting and fixing a 500 internal server error in WordPress is a straightforward process. </span></p>
<p><span>This post breaks down 10 steps to resolve this error and get your site back online:</span></p>
</div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="iuqe"><ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow" start="0">
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-ct6i-refresh-your-browser"><span class="visual-toc__heading-title content-container">Refresh Your Browser</span></a></li>
<li class="toc-item-title"><a href="#toc-up1f-clear-the-wordpress-cache"><span class="visual-toc__heading-title content-container">Clear the WordPress Cache</span></a></li>
<li class="toc-item-title"><a href="#toc-ejob-repair-a-corrupted-htaccess-file"><span class="visual-toc__heading-title content-container">Repair a Corrupted .htaccess File</span></a></li>
<li class="toc-item-title"><a href="#toc-nmxa-deactivate-your-themes"><span class="visual-toc__heading-title content-container">Deactivate Your Theme</span></a></li>
<li class="toc-item-title"><a href="#toc-3jqj-deactivate-your-plugins"><span class="visual-toc__heading-title content-container">Deactivate Your Plugins</span></a></li>
</div>
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-fbgb-increase-the-php-memory"><span class="visual-toc__heading-title content-container">Increase the PHP Memory</span></a></li>
<li class="toc-item-title"><a href="#toc-99om-update-the-php-version"><span class="visual-toc__heading-title content-container">Update the PHP Version</span></a></li>
<li class="toc-item-title"><a href="#toc-jv9l-enable-debugging"><span class="visual-toc__heading-title content-container">Enable Debugging</span></a></li>
<li class="toc-item-title"><a href="#toc-bi1h-roll-your-site-back-to-a-previous-version"><span class="visual-toc__heading-title content-container">Roll Your Site Back to a Previous Version</span></a></li>
<li class="toc-item-title"><a href="#toc-8bp8-contact-your-web-host-for-support"><span class="visual-toc__heading-title content-container">Contact Your Web Hosting Company for Support</span></a></li>
</div>
</ul></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="if2r"><h2 id="toc-1irf-what-is-the-http-500-error"><span>What Is the “HTTP 500 Error”?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i17t">
<p><span>When you see the 500 error, it typically means that something has gone wrong at the server level, though that’s not always the case. Sometimes it’s nothing more than your browser or WordPress cache getting stuck. </span></p>
<p><span>When a more serious and permanent error occurs, the typical culprits are: </span></p>
<ul>
<li><span>Plugin or theme conflicts</span></li>
<li><span>Insufficient memory</span></li>
<li><span>Corrupted WordPress files</span></li>
<li><span>Hosting issues</span></li>
</ul>
<p><span>Because the 500 error code doesn’t tell you where the issue is, there’s a process you’ll have to follow to find the error and restore your WordPress website.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iev8"><h2 id="toc-dmxz-10-steps-to-fix-a-500-error-in-wordpress"><span>10 Steps to Troubleshoot and Fix the 500 Internal Server Error</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i8af"><p><span>When troubleshooting the HTTP 500 error, work through these steps from top to bottom:</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i7kp"><h3 id="toc-ct6i-refresh-your-browser"><span>1. Refresh Your Browser</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iedw">
<p><span>In the case of a temporary glitch, the 500 error might resolve itself. However, the error page could get stuck in your cache. </span></p>
<p><span>The first place to check is your browser. Refresh your screen to see if the error resolves. </span></p>
<p><span>If it doesn’t, open either an incognito window in your current browser or open a different browser altogether. If the error doesn’t appear, then the issue is with your </span><a href="https://webdesign.tutsplus.com/how-to-use-browser-caching-in-wordpress--cms-36270t"><span>browser cache</span></a><span>. </span></p>
<p><span>Go to your browser’s </span><strong>Settings </strong><span>panel (usually accessible on the right side of the browser). Then locate the section called </span><strong>Clear browsing data</strong><span>. In Brave, for instance, it’s under </span><strong>Privacy and security</strong><span>. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg" alt="The Clear browsing data pop-up is open in the Brave browser. The user can select Browsing history, Cookies and other site data, and Cached images and files." loading="lazy" width="870px" height="567px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg" alt="The Clear browsing data pop-up is open in the Brave browser. The user can select Browsing history, Cookies and other site data, and Cached images and files." loading="lazy" width="650px" height="425px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg" alt="The Clear browsing data pop-up is open in the Brave browser. The user can select Browsing history, Cookies and other site data, and Cached images and files." loading="lazy" width="380px" height="252px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_brave_clear_browsing_data.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i505i">
<p><span>Clear the browsing history, cookies, and cached images and files. Then close and reopen your browser. </span></p>
<p><span>If the issue hasn't been resolved, go to the next step.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iimo"><h3 id="toc-up1f-clear-the-wordpress-cache"><span>2. Clear the WordPress Cache</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i1bgo">
<p><span>If you’re using a caching or performance plugin, try </span><a href="https://webdesign.tutsplus.com/how-to-clear-the-wordpress-cache--cms-34439t"><span>clearing the cache from inside of WordPress</span></a><span>. </span></p>
<p><span>Most </span><a href="https://webdesign.tutsplus.com/top-best-wordpress-optimization-plugins--cms-93897t"><span>WordPress optimization plugins</span></a><span> add a </span><strong>Purge Cache</strong><span> option to the top toolbar. If you still have access to the WordPress backend, click on it to clear the cache. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg" alt="In the top toolbar in the WordPress admin panel is a button called Purge SG Cache. This tool comes from the user's optimization and caching plugin." loading="lazy" width="870px" height="233px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg" alt="In the top toolbar in the WordPress admin panel is a button called Purge SG Cache. This tool comes from the user's optimization and caching plugin." loading="lazy" width="650px" height="178px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg" alt="In the top toolbar in the WordPress admin panel is a button called Purge SG Cache. This tool comes from the user's optimization and caching plugin." loading="lazy" width="380px" height="110px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_purge_cache.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icjgp">
<p><span>If that doesn’t fix the issue or you don’t have access to WordPress, try it from your web hosting account. </span></p>
<p><span>In <a href="https://www.siteground.com/" target="_self">SiteGround</a>, for instance, you can do this from </span><strong>Site Options</strong><span>. Go to </span><strong>Speed </strong><span>> </span><strong>Cache</strong><span>. </span></p>
<p><span>If you have </span><strong>Dynamic Cache</strong><span> and </span><strong>Memcached </strong><span>enabled, you have the ability to flush the cache by clicking on the icon at the far-right of each setting.</span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg" alt="In SiteGround's Speed settings, users are able to flush their website's cache under Dynamic Cache and Memcached." loading="lazy" width="870px" height="334px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg" alt="In SiteGround's Speed settings, users are able to flush their website's cache under Dynamic Cache and Memcached." loading="lazy" width="650px" height="253px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg" alt="In SiteGround's Speed settings, users are able to flush their website's cache under Dynamic Cache and Memcached." loading="lazy" width="380px" height="153px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_siteground_flush_cache.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="igsii"><p><span>Check your site again. If the error persists, go to the next step.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itjyf"><h3 id="toc-ejob-repair-a-corrupted-htaccess-file"><span>3. Repair a Corrupted .htaccess File</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iar5o">
<p><span>If your website’s </span><strong>.htaccess</strong><span> file has been corrupted, it can cause the 500 error to show. To check if this is the culprit, you’ll need access to either the FTP or File Manager.</span></p>
<p><span>In SiteGround, you’ll find both under your </span><strong>Site </strong><span>settings. </span></p>
<p><span>Navigate to your website’s core. The folder is called </span><strong>public_html</strong><span>. Then right-click on the </span><strong>.htaccess</strong><span> file and rename it.</span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg" alt="In your FTP or File Manager, locate the .htaccess file. Right-click and rename it." loading="lazy" width="870px" height="454px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg" alt="In your FTP or File Manager, locate the .htaccess file. Right-click and rename it." loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg" alt="In your FTP or File Manager, locate the .htaccess file. Right-click and rename it." loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_rename_htaccess.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="imydk">
<p><span>Check your website. If the error is gone, that means the file is corrupted.</span></p>
<p><span>Return to WordPress. Then go to </span><strong>Settings </strong><span>> </span><strong>Permalinks</strong><span>. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg" alt="To reset the .htaccess file, choose a new Permalinks setting in WordPress. " loading="lazy" width="870px" height="427px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg" alt="To reset the .htaccess file, choose a new Permalinks setting in WordPress. " loading="lazy" width="650px" height="322px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg" alt="To reset the .htaccess file, choose a new Permalinks setting in WordPress. " loading="lazy" width="380px" height="192px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_change_permalinks.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ih7bj">
<p><span>Change the permalinks to a different structure and save your changes. This will automatically reset the </span><strong>.htaccess</strong><span> file. </span></p>
<p><span>You can revert your permalinks settings back to what they were before. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icfkr"><h3 id="toc-nmxa-deactivate-your-themes"><span>4. Deactivate Your Theme</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqsk2">
<p><span>If you continue to see the 500 error, the next possible culprit is your WordPress theme. If it’s conflicting with a recent WordPress core update, one of your plugins, or your PHP version, it could be the source of the problem. </span></p>
<p><span>To find out if it is, you need to deactivate the theme. </span></p>
<p><span>Without access to WordPress, you’ll need to do this from your FTP or File Manager. </span></p>
<p><span>Open the </span><strong>wp-content</strong><span> folder. Rename the </span><strong>themes </strong><span>folder to deactivate your current theme and replace it with the default WordPress theme. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg" alt="From FTP or File Manager, locate the themes folder under wp-content. Right-click to rename it. " loading="lazy" width="870px" height="254px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg" alt="From FTP or File Manager, locate the themes folder under wp-content. Right-click to rename it. " loading="lazy" width="650px" height="193px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg" alt="From FTP or File Manager, locate the themes folder under wp-content. Right-click to rename it. " loading="lazy" width="380px" height="119px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_theme.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6tsh">
<p><span>If your website is working again, then your theme is the problem. </span></p>
<p><span>Since you can’t use the current version of the theme, you’ll need to download and install the previous version of the theme files and use them until the issue has been addressed by the developer. </span></p>
<p><span>If they are unable to do so or are unaware of what the problem might be, then </span><a href="https://webdesign.tutsplus.com/t/tutorials/search/best+wordpress+themes+2024"><span>find a new WordPress theme</span></a><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ig8ko"><h3 id="toc-3jqj-deactivate-your-plugins"><span>5. Deactivate Your Plugins</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6bml">
<p><span>If your theme is okay, then it’s time to check your plugins. </span></p>
<p><span>To quickly deactivate all of your plugins, go to </span><strong>wp-content</strong><span> in your FTP or File Manager. Then rename the </span><strong>plugins </strong><span>folder. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg" alt="In FTP or File Manager, locate the plugins folder under wp-content. Right-click to rename it." loading="lazy" width="870px" height="210px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg" alt="In FTP or File Manager, locate the plugins folder under wp-content. Right-click to rename it." loading="lazy" width="650px" height="161px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg" alt="In FTP or File Manager, locate the plugins folder under wp-content. Right-click to rename it." loading="lazy" width="380px" height="100px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_deactivate_plugins.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijsrf">
<p><span>If access to your site is restored, then one or more of these plugins are at fault. </span></p>
<p><span>In order to determine which one, you’ll need to reinstall them one by one. Return to WordPress and go to the </span><strong>Plugins </strong><span>panel. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg" alt="In WordPress, go to Plugins. Click the Activate button below the plugin you want to reactive" loading="lazy" width="870px" height="376px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg" alt="In WordPress, go to Plugins. Click the Activate button below the plugin you want to reactive" loading="lazy" width="650px" height="284px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg" alt="In WordPress, go to Plugins. Click the Activate button below the plugin you want to reactive" loading="lazy" width="380px" height="171px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_reactivate_plugins.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i62uf">
<p><span>Activate one plugin at a time. If the error doesn’t reappear, then deactivate it and try the next one. </span></p>
<p><span>If the issue appears using this method, then the conflict is likely occurring between that plugin and your version of WordPress (since you already ruled out the theme). If this method doesn’t work, try reactivating the plugins in pairs to identify the incompatibility. </span></p>
<p><span>If you find the issue, report it to the plugin developer so that it can be fixed. You can either use the previous version of the plugin in the meantime or </span><a href="https://webdesign.tutsplus.com/t/tutorials/search/best+wordpress+plugins+2024"><span>find a replacement plugin</span></a><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4tzw"><h3 id="toc-fbgb-increase-the-php-memory"><span>6. Increase the PHP Memory</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ikd85">
<p><span>When your PHP memory reaches its limit, the 500 error may appear. To increase the memory, you can modify one of the following files on the server: </span></p>
<ul>
<li><span>functions.php</span></li>
<li><span>.htaccess</span></li>
<li><span>wp-config.php</span></li>
</ul>
<p><span>Let’s use the <strong>wp-config.php</strong> file for this example. Open up the file and locate the line that looks like this: </span></p>
<p><code>define( 'WP_MEMORY_LIMIT', '64M' );</code></p>
<p><span>The value at the end might be different on your end. Edit it so that it reads: </span></p>
<p><code>define( 'WP_MEMORY_LIMIT', '786M' );</code></p>
<p><span>Save the file and exit. </span></p>
<p><span>Check your site once more. If the error is gone, that means some process (like an oversized file upload or resource-intensive request) was exhausting the PHP memory for your site. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iggkv"><h3 id="toc-99om-update-the-php-version"><span>7. Update the PHP Version</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ieezj">
<p><span>Just as themes and plugins are compatible with certain versions of WordPress, the same is true for PHP. </span></p>
<p><span>For instance, if you take a look at any plugin or theme in the </span><a href="https://wordpress.org/"><span>WordPress.org repository</span></a><span>, you can see which version of PHP each works with. </span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg" alt="In the WordPress plugin repository, you'll find information on which PHP versions each plugin is compatible with. In this example, Elementor is compatible with PHP 7.4 and up." loading="lazy" width="870px" height="597px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg" alt="In the WordPress plugin repository, you'll find information on which PHP versions each plugin is compatible with. In this example, Elementor is compatible with PHP 7.4 and up." loading="lazy" width="650px" height="448px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg" alt="In the WordPress plugin repository, you'll find information on which PHP versions each plugin is compatible with. In this example, Elementor is compatible with PHP 7.4 and up." loading="lazy" width="380px" height="264px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_wordpress_php_requirement.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5ioi">
<p><span>If your plugins or theme require a certain version of PHP in order to run, then this could be the issue. </span></p>
<p><span>To see if your website is running on an older PHP version, go back to your hosting account. In Siteground, you’ll find it under </span><strong>Devs </strong><span>> </span><strong>PHP Manager</strong><span>.</span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg" alt="In SiteGround, users can automatically update PHP. They can also manually adjust it using the settings under the PHP Manager." loading="lazy" width="870px" height="296px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg" alt="In SiteGround, users can automatically update PHP. They can also manually adjust it using the settings under the PHP Manager." loading="lazy" width="650px" height="225px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg" alt="In SiteGround, users can automatically update PHP. They can also manually adjust it using the settings under the PHP Manager." loading="lazy" width="380px" height="137px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_siteground_php_version.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6y37">
<p><span>If the PHP version isn’t updated automatically, set it up from this panel so you won't have to worry about this issue occurring again. You can also manually change the version. Before you make any changes, though, </span><a href="https://webdesign.tutsplus.com/best-backup-plugins-for-wordpress--cms-39581a"><span>make a backup of your website</span></a><span>. </span></p>
<p><span>Once the PHP has been updated, check your site for the error. If it still isn’t fixed, try the next step.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iah3x"><h3 id="toc-jv9l-enable-debugging"><span>8. Enable Debugging</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="is9wo">
<p><span>The 500 error page isn’t going to tell you much except that it’s an “internal server error”. However, with debugging enabled, you might be able to get more information. </span></p>
<p><span>To enable debugging, go to your </span><strong>wp-config.php</strong><span> file. In it is a line that reads:</span></p>
<p><code>// define('WP_DEBUG', false );</code></p>
<p><span>Change it to: </span></p>
<p><code>// define('WP_DEBUG', true);</code></p>
<p><span>Save your changes, return to WordPress, and reload the page. With debugging enabled, you might see a different error message, one with details on which file the error occurred in. </span></p>
<p><span>If nothing has changed or debugging gives you no clear insight into the issue, leave it enabled until you’re able to fully resolve the issue. Then go back to the </span><strong>wp-config.php</strong><span> file and change the value to </span><code>false</code><span>.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9zmz"><h3 id="toc-bi1h-roll-your-site-back-to-a-previous-version"><span>9. Roll Your Site Back to a Previous Version</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="imfca">
<p><span>Some 500 error guides will tell you to reinstall your WordPress core files. With this option, however, you’ll lose your data as well as all the themes and plugins you’ve installed. </span></p>
<p><span>The better option is to restore your site to a previous version. Even if you lose recently made content edits, you won’t lose all of your data. </span></p>
<p><span>There are a couple of ways you may be able to restore an older version of your site. </span></p>
<p><span>If you have access to WordPress, go to your </span><a href="https://webdesign.tutsplus.com/wordpress-backup-plugin-options--cms-34921t"><span>backup plugin</span></a><span>. Select the backup from the day you want to restore and retrieve it.</span></p>
</div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg" alt="An example of how to restore a backup in the UpdraftPlus backup plugin" loading="lazy" width="870px" height="168px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg" alt="An example of how to restore a backup in the UpdraftPlus backup plugin" loading="lazy" width="650px" height="130px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg" alt="An example of how to restore a backup in the UpdraftPlus backup plugin" loading="lazy" width="380px" height="83px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_updraft_restore_backup.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9t85"><p><span>If you don’t have access to WordPress yet or that option doesn’t work, go into your web hosting account. In SiteGround, you’ll find </span><strong>Backups </strong><span>under the </span><strong>Security </strong><span>tab. </span></p></div><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg" alt="Users can save and restore backups from the Security panel in SiteGround" loading="lazy" width="870px" height="485px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg" alt="Users can save and restore backups from the Security panel in SiteGround" loading="lazy" width="650px" height="365px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg" alt="Users can save and restore backups from the Security panel in SiteGround" loading="lazy" width="380px" height="217px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108542/image-upload/http500error_siteground_backup.jpg 2x"></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ityyh">
<p><span>Open the options next to the backup you want to use. Then click </span><strong>Restore All Files and Databases</strong><span>.</span></p>
<p><span>Return to your WordPress site one more time. If the error is gone, then something that happened in the last few days caused the error. </span></p>
<p><span>So, before rushing to implement any WordPress, plugin, or theme updates going forward, make a backup of your website. Do the same if you’re making any major edits to your site or the server settings. </span></p>
<p><span>This way, if the 500 error reappears, you’ll have a reliable restore point to go back to. You’ll also know exactly what caused the issue and can address it with the source (like the plugin developer).</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="img85"><h3 id="toc-8bp8-contact-your-web-host-for-support"><span>10. Contact Your Web Hosting Company for Support</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i2b2d">
<p><span>If nothing has worked at this point, then it’s time to contact your </span><a href="https://webdesign.tutsplus.com/web-hosting-vs-wordpress-hosting--cms-35215a"><span>web hosting provider</span></a><span>. </span></p>
<p><span>Tech support can look behind the scenes to see what recently changed. They should also be able help you resolve the error without interfering too much with the operation of your website.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iflci"><h2 id="toc-9lo5-final-thoughts"><span>Final Thoughts</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idqzx">
<p><span>HTTP error codes like the 500 internal server error generally don’t tell us what’s wrong with our WordPress websites. However, we know what the most common causes are: incompatible plugins or themes, insufficient memory, corrupted files, and server issues.</span></p>
<p><span>This 10-step troubleshooting process will help you get this internal server error fixed in no time.</span></p>
<p><span>Are you experiencing a different issue with your WordPress website? Here are some other common WordPress and server errors you might encounter and how to fix them:</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/wordpress-troubleshooting-error-establishing-a-database-connection--cms-37899"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/37899/preview_image/database_error.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/37899/preview_image/database_error.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/37899/preview_image/database_error.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/37899/preview_image/database_error.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/37899/preview_image/database_error.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/37899/preview_image/database_error.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">WordPress Troubleshooting: Error Establishing a Database Connection</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">28 Dec 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-fix-the-there-has-been-a-critical-error-in-your-website-error-in-wordpress--cms-93228"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/93228/preview_image/computer_problems_confused_african_american_woman_NR736A5.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Fix the “There Has Been a Critical Error in Your Website” Error in WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Kingsley Ubah</div>
<div class="roundup-block__published-date">21 Dec 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-fix-a-403-forbidden-error-on-your-wordpress-site--cms-37730"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/37730/preview_image/entrepreneur-unhappy-with-website-design-AUSZRFA.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Fix a 403 Forbidden Error on Your WordPress Site</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Monty Shokeen</div>
<div class="roundup-block__published-date">27 Aug 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-fix-image-upload-problems-in-wordpress--cms-93855"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/posts/93855/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/posts/93855/preview_image/preview.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/posts/93855/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/posts/93855/preview_image/preview.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/93855/preview_image/preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/93855/preview_image/preview.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Fix Image Upload Problems in WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">20 Feb 2023</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/37732/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37732/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37732/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37732/a2t.img" width="1" /></div>
2024-02-28 09:10:00 UTC
2024-02-28 09:10:00 UTC
Monty Shokeen
tag:code.tutsplus.com,2005:PostPresenter/cms-93490
2022-12-15T15:33:06+00:00
Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="if7f"><p>In this new tutorial, we'll learn how to create an infinite blinking/flashing text effect with CSS animations and a bit of JavaScript. Specifically, selected text parts will switch colors after a certain period. After that, the animation will reinitialize. </p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iafx">
<h2 id="toc-yfc3-our-slider-project">Our Text Effect</h2>
<p><span>Here’s what we’re going to create. It’s a great addition to a portfolio or company landing page, to highlight brands, or names, places, and so on.</span></p>
<p><iframe src="https://codepen.io/tutsplus/embed/oNVpEZX?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<h2 id="toc-hv2v-begin-with-the-html-markup">
<span class="sectionnum">1.</span> Begin With the HTML Markup</h2>
<p>Inside a container, we’ll define a wrapper element that will hold some text with well-known brands, like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"blinking-wrapper"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> Accenture,
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> Amazon
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> Apple,
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> Astrazeneca,
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> Citigroup,
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> Coca-Cola Co,
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> China Merchants Bank,
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> Disney
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> Google,
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> ...
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<p>For each brand (piece of text) we want to animate, we’ll wrap it inside a <code>span</code> element and give it the <code>data-number</code> attribute. The value of the custom attribute will determine the animation order. The smaller the number, the sooner the animation will run. That said, the element with the <code>data-number="1"</code> attribute value will be animated first, then this with the <code>data-number="2"</code> attribute value, etc.</p>
<p>Here’s the required markup skeleton:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"blinking-wrapper"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> Accenture,
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> Amazon
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> Apple,
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> Astrazeneca,
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> Citigroup,
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span</span> <span style="color: #6a9fb5">data-number=</span><span style="color: #90a959">"1"</span><span style="color: #f4bf75">></span>Coca-Cola Co<span style="color: #f4bf75"></span></span>,
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> China Merchants Bank,
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> Disney
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> Google,
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> IBM,
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span</span> <span style="color: #6a9fb5">data-number=</span><span style="color: #90a959">"2"</span><span style="color: #f4bf75">></span>Intel<span style="color: #f4bf75"></span></span>,
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> JPMorgan Chase,
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> Mastercard,
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> McDonalds,
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> Meta,
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> NASA,
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span</span> <span style="color: #6a9fb5">data-number=</span><span style="color: #90a959">"4"</span><span style="color: #f4bf75">></span>Nestle SA<span style="color: #f4bf75"></span></span>,
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> Netflix,
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> Nike,
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> ...
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-2x8v-add-the-css">
<span class="sectionnum">2.</span> Add the CSS</h2>
<p>The CSS will be pretty basic. All we need is to apply a CSS animation to the <code>span</code>s that will change their color from white to a shade of our choice. But note one thing here: the animations will run sequentially when the page loads. At that point, we’ll add the <code>blinking</code> class to the wrapper and give <code>span</code>s appropriate delays.</p>
<p>In your case, depending on the page layout, you might want to start the blinking effect when the <code>.blinking-wrapper</code> element comes into view. </p>
<p>Here are all the styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/*CUSTOM VARIABLES HERE*/</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.container</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1600px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #90a959">15px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.blinking-wrapper</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.blinking-wrapper.blinking</span> <span style="color: #d0d0d0">[</span><span style="color: #f4bf75">data-number</span><span style="color: #d0d0d0">]</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">animation</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">changeColor</span> <span style="color: #90a959">1.5s</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--delay</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0s</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">@keyframes</span> <span style="color: #d0d0d0;background-color: #151515">changeColor</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">to</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--green</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">@media</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">600px</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.blinking-wrapper</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">25px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-5s8f-apply-the-javascript">
<span class="sectionnum">3.</span> Apply the JavaScript</h2>
<p>As mentioned above, apart from adding the <code>blinking</code> class to the wrapper element when the page loads, we’ll assign appropriate delays for each <code>span</code> to determine when their blinking animation will start. The first element won’t have any delay. All the others will fire as soon as the animation of the previous animated element finishes.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93490/image-upload/markup_delays.jpg" alt="The generated delays" loading="lazy" width="870px" height="471px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93490/image-upload/markup_delays.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93490/image-upload/markup_delays.jpg" alt="The generated delays" loading="lazy" width="650px" height="354px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93490/image-upload/markup_delays.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93490/image-upload/markup_delays.jpg" alt="The generated delays" loading="lazy" width="380px" height="211px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93490/image-upload/markup_delays.jpg 2x"></figure>
<p>Of course, you can set the delays manually or adjust the timings as you wish. </p>
<p>Here’s the required JavaScript code:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.blinking-wrapper</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">animatedEls</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelectorAll</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">[data-number]</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">blinking</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">BASE_DELAY</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">1.5</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">window</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">load</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">animatedEls</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">(</span><span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">el</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">index</span> <span style="color: #d0d0d0">!=</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">delay</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">BASE_DELAY</span> <span style="color: #d0d0d0">*</span> <span style="color: #d0d0d0;background-color: #151515">el</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">dataset</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">number</span> <span style="color: #d0d0d0">-</span> <span style="color: #d0d0d0;background-color: #151515">BASE_DELAY</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">el</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">style</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">setProperty</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">--delay</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">delay</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">s`</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-zye3-replay-animations">Replay Animations</h3>
<p>With this code in place, our animations will play as expected for once. But what if we want to replay them in sequence (keeping the desired delays) infinitely? Just using the <code>infinite</code> keyword for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count" target="_blank" rel="noopener">animation iteration count</a> won’t work.</p>
<p>In such a case, we’ll wait for all animations to finish before reinitializing them using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event" target="_blank" rel="noopener">animationend</a></code> event of the last animated element—the one with the largest <code>data-number</code><span>. A quick way to find which element this should be is to manually give it a unique ID/class. Alternatively, we can write some code for retrieving the largest number from all the <code>data-number</code> attribute values like below:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">getMaxNumber</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">numbers</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">Array</span><span style="color: #d0d0d0">.</span><span style="color: #aa759f">from</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">animatedEls</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">map</span><span style="color: #d0d0d0">(</span><span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">el</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">el</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">dataset</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">number</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">Math</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">max</span><span style="color: #d0d0d0">(...</span><span style="color: #d0d0d0;background-color: #151515">numbers</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Next, we’ll target the desired element and listen for its <code>animationend</code> event.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">`[data-number="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">getMaxNumber</span><span style="color: #d0d0d0">()}</span><span style="color: #90a959">"]`</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">animationend</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #949494">//stuff here
</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Inside it, we’ll do three things:</p>
<ul>
<li>Remove the <code>blinking</code> class from the wrapper element.</li>
<li>Force a <a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a" target="_blank" rel="noopener">reflow</a> to that element by calculating its height or anything that makes it reflow without returning anything.</li>
<li>Add again the <code>blinking</code> class to it. </li>
</ul>
<p>This way, the CSS animations will resume with the delays in place each time the previous bunch of them finishes. If we don’t cause a reflow, our animation won’t restart. You can test by removing the reflow action.</p>
<p>Here’s the required JavaScript code:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">`[data-number="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">getMaxNumber</span><span style="color: #d0d0d0">()}</span><span style="color: #90a959">"]`</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">animationend</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">remove</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">void</span> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">offsetHeight</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>An alternative implementation, instead of forcing a reflow that can be expensive depending on your layouts, is to append the class to the wrapper after the shortest possible delay like this—by giving a zero delay, we’ll let the browser decide the shortest delay time:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">`[data-number="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">getMaxNumber</span><span style="color: #d0d0d0">()}</span><span style="color: #90a959">"]`</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">animationend</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">remove</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">setTimeout</span><span style="color: #d0d0d0">(</span><span style="color: #d28445">function</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">blinkingWrapper</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">TOGGLE_CLASS</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Apart from these methods discussed here, there are others as well. Feel free to <span>let us know on </span><a href="https://twitter.com/tutsplus" target="_blank" rel="noopener">X</a> <span>or in the</span> <a href="https://codepen.io/tutsplus/details/oNVpEZX" target="_blank" rel="noopener">demo comments</a> if you’ve used any other to accomplish something similar!</p>
<h2 id="toc-kvck-conclusion">Conclusion</h2>
<p><span>In this tutorial, we managed to build an infinite blinking CSS effect with</span><span> staggering animations thanks to the </span><code>animationend</code> <span>event. This kind of effect is useful if you want to highlight specific portions of the text like your latest projects, top clients, top skills, etc.</span></p>
<p><span>Here’s again our effect:</span></p>
<p><iframe src="https://codepen.io/tutsplus/embed/oNVpEZX?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<div id="it0w5" class="content-block content-block-wysi" data-content-block-type="Wysi">
<p>As always, thanks a lot for reading!</p>
</div>
<div id="i6sk6" class="content-block content-block-wysi" data-content-block-type="Wysi"></div>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/93490/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93490/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93490/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93490/a2t.img" width="1" /></div>
2024-02-07 11:54:00 UTC
2024-02-07 11:54:00 UTC
George Martsoukos
tag:code.tutsplus.com,2005:PostPresenter/cms-107864
2024-01-08T08:43:39+00:00
How to Integrate Bootstrap 5 Tabs With Chart.js
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ib4o{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="icvj"><p><span>Today, I’ll cover </span><a class="editor-rtfLink" href="https://www.chartjs.org/" target="_blank" rel="noopener"><span>Chart.js</span></a><span>, a very popular JavaScript library, and teach you how to incorporate charts of this library into <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior" target="_blank" rel="noopener">Bootstrap 5 tabs/pills</a>. The idea is that each time we click on a Bootstrap tab, the target chart will be reconstructed and hence reanimated.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0lz">
<p><span>Bear in mind that this technique can work for embedding such a chart into a tab component of any front-end framework.</span></p>
<h2 id="toc-9ruv-get-up-to-speed-with-charts"><span>Get up to Speed With Charts</span></h2>
<p><span>In previous tutorials, I’ve shown you how to create different kinds of charts utilizing either only CSS or a JavaScript charting library like </span><a class="editor-rtfLink" href="https://www.highcharts.com/" target="_blank" rel="noopener"><span>HighCharts.js</span></a><span>. Dive in and find your favourite approach!</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/the-best-css-and-javascript-chart-tutorials-on-tuts--cms-37142"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/posts/37142/preview_image/sm.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/posts/37142/preview_image/sm.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/posts/37142/preview_image/sm.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/posts/37142/preview_image/sm.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/37142/preview_image/sm.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/37142/preview_image/sm.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">The Best CSS and JavaScript Chart Tutorials on Tuts+</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">31 Aug 2022</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="ib4o"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iral">
<h2 id="toc-s6y7-our-scrolling-card-ui">Our Bar Charts</h2>
<p>Check the first version where we integrate a vertical bar chart with Bootstrap tabs. Click on the tabs and watch the charts reanimate:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/bGZqWwE?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<p>And here's the second version where we integrate a horizontal bar chart with Bootstrap pills:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/wvOJdgK?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
</div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i1jh">
<h2 id="toc-lzmo-what-is-tabspills">What are Tabs/Pills?</h2>
<p>Tabs help us divide content into multiple sections that live under a common parent. At any given time, only one of these sections is visible. Imagine them like browser tabs with the difference that you don’t have to change the page to view them all.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg" alt="Tabs" loading="lazy" width="870px" height="123px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg" alt="Tabs" loading="lazy" width="650px" height="96px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg" alt="Tabs" loading="lazy" width="380px" height="64px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/bs_tabs.jpg 2x"></figure>
<p>Pills are a tabs variation.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/bs_pills.jpg" alt="Pills" loading="lazy" width="870px" height="117px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/bs_pills.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/bs_pills.jpg" alt="Pills" loading="lazy" width="650px" height="92px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/bs_pills.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/bs_pills.jpg" alt="Pills" loading="lazy" width="380px" height="61px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/bs_pills.jpg 2x"></figure>
<p>For this demonstration, as discussed above, we’ll work with <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs" target="_blank" rel="noopener">Bootstrap tabs/pills</a>.</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/make-a-tabbed-navigation-with-child-pages-in-wordpress--cms-107842"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/107842/preview_image/tabbed_nav.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Make a Tabbed Navigation With Child Pages in WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">23 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/convert-bootstrap-pills-tabs-into-a-dropdown-menu--cms-35817"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35817/preview_image/bootstrap-thumb.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">26 Feb 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-add-deep-linking-to-the-bootstrap-4-tabs-component--cms-31180"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31180/preview_image/tabs.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31180/preview_image/tabs.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31180/preview_image/tabs.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31180/preview_image/tabs.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31180/preview_image/tabs.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31180/preview_image/tabs.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add Deep Linking to the Bootstrap 4 Tabs Component</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">06 Jun 2018</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h2 id="toc-765c-what-is-chartjs">What is Chart.js?</h2>
<p><span>Chart.js is one of the most dominant JavaScript charting libraries with over 62K </span><a class="editor-rtfLink" href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener"><span>GitHub Stars</span></a><span>. It’s free, easy to use, customizable, and compatible with all major JavaScript frameworks. Unlike other charting libraries that render chart elements as SVGs, it’s an HTML5 canvas-based charting library.</span></p>
<p><span>It supports all the common chart types like bar (column) charts, line charts, pie charts, and donut charts but also more complex ones like radar charts. In our case, we’ll work with bar charts.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/build-a-static-portfolio-with-advanced-css-bar-chart--cms-33050"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33050/preview_image/preview.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33050/preview_image/preview.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33050/preview_image/preview.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33050/preview_image/preview.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33050/preview_image/preview.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33050/preview_image/preview.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Build a Static Portfolio With Advanced CSS Bar Chart</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">11 Jun 2019</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/32933/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/32933/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/32933/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/32933/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/32933/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/32933/preview_image/pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Static Portfolio Page With CSS & JavaScript</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">02 Apr 2019</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h2 id="toc-i46e-include-bootstrap-assets">Required Assets</h2>
<p>To kick things off, we’ll include the required <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links" target="_blank" rel="noopener">Bootstrap </a>and <a href="https://www.chartjs.org/docs/latest/getting-started/installation.html" target="_blank" rel="noopener">Chart.js</a> files within our CodePen demo:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/codepen_required_css.png" alt="The required CSS file" loading="lazy" width="870px" height="579px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/codepen_required_css.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/codepen_required_css.png" alt="The required CSS file" loading="lazy" width="650px" height="434px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/codepen_required_css.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/codepen_required_css.png" alt="The required CSS file" loading="lazy" width="380px" height="257px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/codepen_required_css.png 2x">
<figcaption>The required CSS file</figcaption>
</figure>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/codepen_required_js.png" alt="The required JavaScript files" loading="lazy" width="870px" height="474px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/codepen_required_js.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/codepen_required_js.png" alt="The required JavaScript files" loading="lazy" width="650px" height="356px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/codepen_required_js.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/codepen_required_js.png" alt="The required JavaScript files" loading="lazy" width="380px" height="212px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/codepen_required_js.png 2x">
<figcaption>The required JavaScript files</figcaption>
</figure>
<p>Optionally, we’ll include a custom Google Font that will be a good example for learning how to add a custom font to Chart.js.</p>
<h2 id="toc-wcr8-data">Data</h2>
<p>In our case, we’ll have three tabs, so we’ll create three charts. Data will be different for each chart. In a real-world scenario, the data would come from a third-party system like a CMS, and we’d have to send it to our JavaScript for manipulation. Here, we’ll work with some dummy, hardcoded data, but in another tutorial, I’ll show you how to create these data dynamically through WordPress. </p>
<p>In any case, the important thing is the data structure. Our data will live under an array of objects (yours can be different)—each object will represent a chart:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">charts</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">[</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">bars</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">bar1</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">[</span><span style="color: #90a959">"</span><span style="color: #90a959">25</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">76</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">64</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">33</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">85</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">46</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">25</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">],</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">bar2</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">[</span><span style="color: #90a959">"</span><span style="color: #90a959">32</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">68</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">77</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">29</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">88</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">65</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">60</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">]</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">labels</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">[</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 1</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 2</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 3</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 4</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 5</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 6</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">Label 7</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">],</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">legends</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">legend1</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Male</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #6a9fb5">legend2</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Female</span><span style="color: #90a959">"</span> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">title</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">Gender Comparison Graph</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #949494">//two more objects here
</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">];</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-76su-chartjs-integration-with-bootstrap-tabs">Chart.js Integration With Bootstrap Tabs</h2>
<p>We’ll create a Bootstrap tab component by copying the <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior" target="_blank" rel="noopener">basic code</a> that is provided in the documentation and just altering the texts.</p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg" alt="Bootstrap tabs and Chart.js integration" loading="lazy" width="870px" height="510px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg" alt="Bootstrap tabs and Chart.js integration" loading="lazy" width="650px" height="383px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg" alt="Bootstrap tabs and Chart.js integration" loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/bootstrap_tabs.jpg 2x"></p>
<p>Inside each panel, we’ll place a different <code>canvas</code> element—remember Charts.js is a canvas-based library.</p>
<p>Here’s the markup:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container my-5"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><ul</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav nav-tabs"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myTab"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tablist"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link active"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart1-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#chart1-tab-pane"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"chart1-tab-pane"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"true"</span><span style="color: #f4bf75">></span>Bar Chart 1<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart2-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#chart2-tab-pane"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"chart2-tab-pane"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"false"</span><span style="color: #f4bf75">></span>Bar Chart 2<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart3-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#chart3-tab-pane"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"chart3-tab-pane"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"false"</span><span style="color: #f4bf75">></span>Bar Chart 3<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></ul></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-content mt-5"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myTabContent"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade show active"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart1-tab-pane"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"chart1-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart1"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart2-tab-pane"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"chart2-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart2"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"chart3-tab-pane"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"chart3-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart3"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<p><span>By default, through the <code><a href="https://www.chartjs.org/docs/latest/configuration/" target="_blank" rel="noopener">Chart.defaults</a></code> object (print its contents in the console!), we’ll force our chart texts to have a dark cyan color and render a custom Google Font. Remember to set options through this global object in case you have charts that share common things.</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">Chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">defaults</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">font</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">family</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">Poppins, sans-serif</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">Chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">defaults</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">color</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">#073b4c</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
</tbody></table></div>
<p>With the help of the <code><a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#events" target="_blank" rel="noopener">shown.bs.tab</a></code> Bootstrap tab event, each time a new tab is shown, we’ll grab the index of the active tab and pass it as a parameter of the <code>initializeSingleChart()</code> function. We’ll also call that function initially and pass it 0 (arrays are zero-based) to render the chart of the first tab which is by default active. </p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">Note that we would pass a different number if we wanted to have another active tab by default. </div>
</div>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">tabEls</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelectorAll</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">'</span><span style="color: #90a959">button[data-bs-toggle="tab"]</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">initializeSingleChart</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">tabEls</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">(</span><span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">tabEl</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">tabEl</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">shown.bs.tab</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">event</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">index</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">Array</span><span style="color: #d0d0d0">.</span><span style="color: #aa759f">from</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">tabEls</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">indexOf</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">event</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">target</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">initializeSingleChart</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener">Intersection Observer API</a> to control when the default animation for the first chart will run if your tabs don't sit at the top of the page.</div>
</div>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/scrolling-animations-with-css-clip-path-property--cms-36449"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36449/preview_image/slide.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36449/preview_image/slide.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36449/preview_image/slide.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36449/preview_image/slide.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36449/preview_image/slide.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36449/preview_image/slide.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Create Beautiful Scrolling Animations With the CSS Clip-Path Property</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">18 Jan 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/grayscale-to-color-effect-on-scroll--cms-35094"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35094/preview_image/grayscale-to-color.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Grayscale to Color Effect on Scroll (CSS & JavaScript)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">19 May 2020</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<p><span>Inside the <code>initializeSingleChart()</code> function, we’ll construct the <a href="https://www.chartjs.org/docs/latest/charts/bar.html" target="_blank" rel="noopener">column chart</a> of the associated tab panel. But here’s the thing: to replay the animation upon tab click, we’ll first destroy the chart if it exists, then reconstruct it. </span></p>
<p><span>An alternative implementation, perhaps even more solid, especially if you have lots of data, instead of destroying and recreating it, might be to somehow update the chart using the </span><code><a class="editor-rtfLink" href="https://www.chartjs.org/docs/latest/developers/updates.html" target="_blank" rel="noopener"><span>update()</span></a></code><span> method. </span></p>
<p><span>Finally, we’ll show the values of the y-axis as percentages by creating <a href="https://www.chartjs.org/docs/latest/axes/labelling.html" target="_blank" rel="noopener">custom tick formats</a>.</span></p>
<p><span>Here’s the required JavaScript code:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">initializeSingleChart</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">chart</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">charts</span><span style="color: #d0d0d0">[</span><span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">];</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">chartEl</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`myChart</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0">++</span><span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">chartInstance</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">Chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getChart</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">chartEl</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">chartInstance</span> <span style="color: #d0d0d0">!==</span> <span style="color: #d28445">undefined</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">chartInstance</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">destroy</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">data</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">labels</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">labels</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">datasets</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">[</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">label</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">legends</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">legend1</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">data</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">bars</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">bar1</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">backgroundColor</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">#dc3545</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">label</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">legends</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">legend2</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">data</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">bars</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">bar2</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">backgroundColor</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">#198754</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">]</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">};</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">config</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">type</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">bar</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">options</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">plugins</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">title</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">text</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">chart</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">title</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">position</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">top</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">font</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">25</span>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-40" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>40</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15</span>
</pre></td>
</tr>
<tr id="line-41" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>41</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-42" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>42</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-43" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>43</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">legend</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-44" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>44</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">position</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">bottom</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-45" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>45</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">labels</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-46" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>46</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-47" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>47</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">font</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-48" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>48</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">14</span>
</pre></td>
</tr>
<tr id="line-49" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>49</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-50" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>50</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-51" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>51</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-52" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>52</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">tooltip</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-53" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>53</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">enabled</span><span style="color: #d0d0d0">:</span> <span style="color: #d28445">false</span>
</pre></td>
</tr>
<tr id="line-54" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>54</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-55" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>55</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">},</span>
</pre></td>
</tr>
<tr id="line-56" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>56</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">scales</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-57" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>57</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">y</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-58" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>58</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">ticks</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-59" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>59</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">crossAlign</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">left</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-60" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>60</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">callback</span><span style="color: #d0d0d0">:</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">val</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-61" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>61</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">val</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">%`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-62" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>62</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-63" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>63</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-64" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>64</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-65" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>65</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-66" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>66</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-67" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>67</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">};</span>
</pre></td>
</tr>
<tr id="line-68" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>68</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-69" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>69</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">ctx</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">chartEl</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">getContext</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">2d</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-70" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>70</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Chart</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">ctx</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">config</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-71" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>71</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-76su-chartjs-integration-with-bootstrap-tabs">Chart.js Integration With Bootstrap Pills</h2>
<p>We’ll create a Bootstrap pill component by copying the <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior" target="_blank" rel="noopener">basic code</a> that is provided in the documentation and just altering the texts.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg" alt="Bootstrap pills and Chart.js integration" loading="lazy" width="870px" height="505px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg" alt="Bootstrap pills and Chart.js integration" loading="lazy" width="650px" height="379px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg" alt="Bootstrap pills and Chart.js integration" loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/107864/image-upload/Bootstrap_pills.jpg 2x"></figure>
<p>Here’s the markup:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container my-5"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><ul</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav nav-pills mb-3"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-tab"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tablist"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link active"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart1-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"pill"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#pills-chart1"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"pills-chart1"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"true"</span><span style="color: #f4bf75">></span>Bar Chart1<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart2-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"pill"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#pills-chart2"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"pills-chart2"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"false"</span><span style="color: #f4bf75">></span>Bar Chart2<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><li</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-item"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"nav-link"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart3-tab"</span> <span style="color: #6a9fb5">data-bs-toggle=</span><span style="color: #90a959">"pill"</span> <span style="color: #6a9fb5">data-bs-target=</span><span style="color: #90a959">"#pills-chart3"</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tab"</span> <span style="color: #6a9fb5">aria-controls=</span><span style="color: #90a959">"pills-chart3"</span> <span style="color: #6a9fb5">aria-selected=</span><span style="color: #90a959">"false"</span><span style="color: #f4bf75">></span>Bar Chart3<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></li></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></ul></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-content mt-5"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-tabContent"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade show active"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart1"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"pills-chart1-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart1"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart2"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"pills-chart2-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart2"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"tab-pane fade"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"pills-chart3"</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"tabpanel"</span> <span style="color: #6a9fb5">aria-labelledby=</span><span style="color: #90a959">"pills-chart3-tab"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><canvas</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"myChart3"</span><span style="color: #f4bf75">></canvas></span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<p>The rest of the JavaScript code remains the same apart from two changes: first, we’ll target pills and not tabs. Secondly, we’ll change the base axis of the dataset from <code>x</code> to <code>y</code> via the <a href="https://www.chartjs.org/docs/latest/charts/bar.html#general" target="_blank" rel="noopener"><code>indexAxis</code></a> property. This way, we’ll change our chart from vertical to horizontal. As a result of that, we’ll show as percentages the values of the x-axis and not the y-axis.</p>
<p>Here are the code differences compared to the tabs:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">tabEls</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelectorAll</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">'</span><span style="color: #90a959">button[data-bs-toggle="pill"]</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">initializeSingleChart</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">index</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">indexAxis</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">y</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">scales</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">x</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">ticks</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">callback</span><span style="color: #d0d0d0">:</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">val</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">val</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">%`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-n2pl-conclusion">Conclusion</h2>
<p>Done! During this tutorial, we learned how to create and animate horizontal and vertical bar charts using the Chart.js library each time a Bootstrap 5 tab/pill becomes active. As mentioned before, remember that this implementation will work with other front-end frameworks as well as for other chart types.</p>
<p>Let’s recall what we built today:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/bGZqWwE?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<p><iframe src="https://codepen.io/tutsplus/embed/wvOJdgK?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<p>In another tutorial, I’ll show you how to make the hardcoded data we used here <em>dynamic</em>, by pulling it from the WordPress CMS. This way, you’ll have total control of creating any chart type you want with real data and even embedding it in front-end framework components like tabs!</p>
<p>As always, thanks a lot for reading!</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/107864/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/107864/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/107864/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/107864/a2t.img" width="1" /></div>
2024-01-31 09:50:00 UTC
2024-01-31 09:50:00 UTC
George Martsoukos
tag:code.tutsplus.com,2005:PostPresenter/cms-34622
2020-02-04T15:49:25+00:00
How to Use WordPress: A Beginner’s Guide to Getting Started
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i0fl"><p><span>In this step-by-step WordPress tutorial, we’re going to show you how to use WordPress even if you’ve never built a website with it before (or built a website, in general). No professional design or coding skills are required!</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iugi">
<p><span>WordPress has long been the #1 platform for building websites in the world. At first glance, however, it might not appear to be as easy to use as other website builder options out there that overly simplify things.</span></p>
<p><span>Don’t let initial appearances fool you though. WordPress is the best and easiest way to build an amazing looking and feature-rich website that visitors </span><em><span>and </span></em><span>search engines love.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idvmj">
<h2 id="toc-oz1o-how-to-use-wordpress-to-create-a-website"><span>How to Use WordPress to Create a Website</span></h2>
<p><span>Ready to master the basics of using WordPress? This tutorial will break down the process into 10 simple and easy-to-follow steps:</span></p>
</div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="i3kb"><ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow" start="0">
<div class="visual-toc-column div-container" id="ipo0x">
<li class="toc-item-title"><a href="#toc-3hal-step-1-purchase-a-domain-name-and-hosting-plan"><span class="visual-toc__heading-title content-container">Purchase a Domain Name and Hosting Plan</span></a></li>
<li class="toc-item-title"><a href="#toc-x00d-step-2-install-wordpress"><span class="visual-toc__heading-title content-container">Install WordPress</span></a></li>
<li class="toc-item-title"><a href="#toc-u31k-step-3-get-acquainted-with-the-wordpress-admin-screens"><span class="visual-toc__heading-title content-container">Get Acquainted with the WordPress Admin Screens</span></a></li>
<li class="toc-item-title"><a href="#toc-tl6x-step-4-set-up-a-theme"><span class="visual-toc__heading-title content-container">Set Up a Theme</span></a></li>
<li class="toc-item-title"><a href="#toc-xvzw-step-5-install-wordpress-plugins"><span class="visual-toc__heading-title content-container">Install WordPress Plugins</span></a></li>
</div>
<div class="visual-toc-column div-container" id="iwxwp">
<li class="toc-item-title"><a href="#toc-g52i-step-6-add-pages"><span class="visual-toc__heading-title content-container">Add Pages</span></a></li>
<li class="toc-item-title"><a href="#toc-ec91-step-7-create-your-content"><span class="visual-toc__heading-title content-container">Create Your Content</span></a></li>
<li class="toc-item-title"><a href="#toc-v5vh-step-8-edit-your-sites-settings"><span class="visual-toc__heading-title content-container">Edit Your Site’s Settings</span></a></li>
<li class="toc-item-title"><a href="#toc-vsro-step-9-set-up-the-navigation"><span class="visual-toc__heading-title content-container">Set Up the Navigation</span></a></li>
<li class="toc-item-title"><a href="#toc-8lmi-step-10-manage-your-site"><span class="visual-toc__heading-title content-container">Manage Your Site</span></a></li>
</div>
</ul></div><div data-content-block-type="Wysi" id="il6b" class="content-block-wysi content-block">
<h3 id="toc-3hal-step-1-purchase-a-domain-name-and-hosting-plan"><span>Step 1: Purchase a Domain Name and Hosting Plan</span></h3>
<p><span>If you want to </span><a href="https://webdesign.tutsplus.com/what-is-wordpress--cms-34530t"><span>build a website with WordPress</span></a><span>, you have two options:</span></p>
<p><strong>1. A site hosted on WordPress.com</strong></p>
<p><span>With this model, you add your site to the existing network at <a href="https://wordpress.com/" target="_blank" rel="noopener">WordPress.com</a> and choose the plan that’s right for you. You can get a free site, but features will be very limited.</span></p>
<p><strong>2. A self-hosted site via WordPress.org</strong></p>
<p><span>This is a site you install on hosting space you buy from a hosting provider. <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress.org</a> software is free, so you only have to pay for </span><a href="https://webdesign.tutsplus.com/web-hosting-vs-wordpress-hosting--cms-35215a"><span>web hosting</span></a><span>. You’ll find you get much more flexibility with this model, and the site is yours; it doesn’t belong to the people at WordPress.com.</span></p>
<p><span>In this tutorial, we’re going to demonstrate how to create a website using the self-hosted WordPress option. So we’re going to need a hosting plan and domain name to get started.</span></p>
<h4 id="toc-xbp5-discount-for-managed-hosting-with-siteground"><span>Discount for Managed Hosting With SiteGround</span></h4>
<p><span>SiteGround is one of the most popular WordPress hosting options. Here are some of the reasons why millions of WordPress users choose SiteGround: </span></p>
<ul>
<li><span>Fast and reliable hosting</span></li>
<li><span>One-click WordPress installer</span></li>
<li><span>Free expert support</span></li>
<li><span>Auto-updates</span></li>
<li><span>Free daily backups</span></li>
<li><span>Free SSL certificate</span></li>
</ul>
<p><span>We're happy to be able to offer a huge discount </span><a href="https://themeforest.net/wordpress-hosting" data-action="click->ga-analytics#sendMarketClickEvent"><span>of up to 75% off managed WordPress hosting</span></a><span>, thanks to our partnership with SiteGround.</span></p>
<p><span>You can search for and buy a domain name when you complete your hosting purchase. SiteGround simplifies the entire process.</span></p>
<h3 id="toc-x00d-step-2-install-wordpress"><span>Step 2: Install WordPress</span></h3>
<p><span>You can install WordPress in one of two ways:</span></p>
<ol>
<li><span>Use an auto-installer your hosting provider gives you (which is the easier way)</span></li>
<li><span>Install WordPress manually on your server (which is slightly more reliable)</span></li>
</ol>
<p><span>If you’re new to creating websites, use your host’s one-click WordPress installer. (Or WordPress + WooCommerce for ecommerce sites.)</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg" alt="What the one-click WordPress installer looks like in the SiteGround control panel. Users can install WordPress or WordPress with WooCommerce" loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg" alt="What the one-click WordPress installer looks like in the SiteGround control panel. Users can install WordPress or WordPress with WooCommerce" loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg" alt="What the one-click WordPress installer looks like in the SiteGround control panel. Users can install WordPress or WordPress with WooCommerce" loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_install_wordpress.jpg 2x"></figure>
<p><span>We’ve created a guide to installing WordPress. It will walk you through both WordPress setup options: </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-install-wordpress--cms-34509"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/34509/preview_image/installing%20wordpress.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Install WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Rachel McCollin</div>
<div class="roundup-block__published-date">17 Apr 2020</div>
</div>
</div>
</div>
</div></a></li></ul>
<h3 id="toc-u31k-step-3-get-acquainted-with-the-wordpress-admin-screens"><span>Step 3: Get Acquainted with the WordPress Admin Screens</span></h3>
<p><span>After you’ve installed WordPress and logged in, you’ll see the WordPress admin screens. This will always be your home base.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg" alt="WordPress dashboard" loading="lazy" width="870px" height="465px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg" alt="WordPress dashboard" loading="lazy" width="650px" height="350px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg" alt="WordPress dashboard" loading="lazy" width="380px" height="208px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/34622/image/WordPress%20dashboard.jpg 2x"></figure>
<p><span>The menu links on the left lead you to the main areas of WordPress you’ll use to create and manage your designs, content, plugins, users, settings, and more:</span></p>
<h4 id="toc-nh7h-dashboard"><span>Dashboard</span></h4>
<p><span>This is the main dashboard, which acts as a shortcut to the rest of your site. Using the </span><strong>Screen Options</strong><span> tab in the top-right corner, you can customize what sort of information or shortcuts appear on this screen.</span></p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">
<span>You can also update themes and plugins from the </span><strong>Updates </strong><span>page in this section.</span>
</div>
</div>
<h4 id="toc-hkxu-media"><span>Media</span></h4>
<p><span>This is the library where all of your media uploads live. It includes:</span></p>
<ul>
<li><span>Logos</span></li>
<li><span>Images</span></li>
<li><span>Videos</span></li>
<li><span>Audio files</span></li>
<li><span>File attachments</span></li>
</ul>
<p><span>If you import any theme demos or pre-built sites, the content will appear here as well.</span></p>
<h4 id="toc-wnsm-pages"><span>Pages</span></h4>
<p><span>You’ll add and customize the main pages of your website in this section. </span></p>
<p><span>Specialized pages like blog posts, ecommerce product pages, and others will not appear here. They’ll have their own dedicated sections in the WordPress menu.</span></p>
<h4 id="toc-yyza-appearance"><span>Appearance</span></h4>
<p><span>There are various tools in this section that will allow you to configure the way your site looks. </span></p>
<ul>
<li>
<strong>Themes </strong><span>contains all your active and inactive themes. </span>
</li>
<li>
<strong>Widgets </strong><span>can be helpful for creating sidebar and footer content. </span>
</li>
<li>
<strong>Menus </strong><span>is where you create the website navigation.</span>
</li>
</ul>
<p><strong>Customizer </strong><span>allows you to do things like upload your logo and favicon, set global colors and fonts, set default page structures, and more. Your theme may come with its own customization panel as well, so you’ll need to use both.</span></p>
<h4 id="toc-g81j-plugins"><span>Plugins</span></h4>
<p><span>When you need to add extra features or functionality to your website, plugins provide a fast and convenient way to build them out. With just a couple clicks, you can set up things like Google Analytics, a live chat widget, and a security monitor. </span></p>
<h4 id="toc-sodk-users"><span>Users</span></h4>
<p><span>You might want to add more users to WordPress — to manage the site, write blog posts, troubleshoot, and so on. Use this area to add new users and assign them access privileges depending on what they need WordPress for.</span></p>
<h4 id="toc-6ul6-settings"><span>Settings</span></h4>
<p><span>These are the basic settings for WordPress. Review them to do things like set the home page, restrict comments, manage media sizes, and more.</span></p>
<h4 id="toc-ev6g-posts-and-comments"><span>Posts and Comments</span></h4>
<p><span>If you start a blog, you’ll use these sections often. </span><strong>Posts </strong><span>is where you’ll create each new entry for your blog. It looks similar to Pages, except there are additional settings for Categories, Tags, and so on. </span></p>
<p><strong>Comments </strong><span>is where you’ll manage any comments your content receives. </span></p>
<h4 id="toc-ep7f-other-menu-links"><span>Other Menu Links</span></h4>
<p><span>When you install plugins, you’ll find that some of them add extra items to the admin menus. Premium themes tend to do this as well. Some add more items to the existing menus and some (increasingly, these days) add a new main-level menu item. </span></p>
<p><span>Take some time to explore these admin screens and see what they do. You’ll find they make more sense once you start adding content and installing plugins and themes, which we’ll come to shortly.</span></p>
<h3 id="toc-tl6x-step-4-set-up-a-theme"><span>Step 4: Set Up a Theme</span></h3>
<p><span>Every WordPress site needs a theme. This is the code that determines how your site looks and how it displays your content.</span></p>
<p><span>When you first enter WordPress, the default theme will be installed and activated for you. WordPress names these themes according to the year, so it’ll be called something like </span><strong>Twenty Twenty-Four</strong><span>.</span></p>
<p><span>Sticking with the default theme will make your site look just like millions of others, so it’s worth changing it. </span></p>
<p><span>There are thousands of great themes out there, and you’ll find some free ones in the </span><a href="https://wordpress.org/themes/"><span>WordPress.org theme repository</span></a><span>. You’ll find these same themes in your WordPress installation.</span></p>
<p><span>There are two ways to find and install a free theme from WordPress. Go to </span><strong>Appearance > Themes</strong><span>. Install and activate any theme you want from this screen.</span></p>
<p><span>Another way to do it is via </span><strong>Appearance > Customize</strong><span>. If you use the Customizer, you can preview what your theme will look like before you activate it.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg" alt="Editing themes in the Customizer" loading="lazy" width="870px" height="489px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg" alt="Editing themes in the Customizer" loading="lazy" width="650px" height="368px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg" alt="Editing themes in the Customizer" loading="lazy" width="380px" height="219px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/34622/image/changing%20a%20theme%20in%20the%20Customizer.jpg 2x"></figure>
<p><span>You can install as many themes as you like and try them out. But you can only have one activated. </span></p>
<p><span>If you want a theme with more flexibility and features, consider buying a premium theme from a provider like </span><a href="https://themeforest.net/category/wordpress" data-action="click->ga-analytics#sendMarketClickEvent"><span>Envato Market</span></a><span>. Premium themes tend to have more design demos and templates, widget areas, options for navigation and layout, niche features, and more customization options.</span></p>
<p><span>Once you’ve settled on a theme, spend some time configuring its settings. </span></p>
<p><span>Start by going to </span><strong>Appearance </strong><span>> </span><strong>Customize </strong><span>once more. Upload your logo, set your global colors, choose your fonts, and configure other settings as needed.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg" alt="The WordPress Customizer is where users go to customize the look, layout, and some of the features of their WordPress theme (Astra is the example shown here)." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg" alt="The WordPress Customizer is where users go to customize the look, layout, and some of the features of their WordPress theme (Astra is the example shown here)." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg" alt="The WordPress Customizer is where users go to customize the look, layout, and some of the features of their WordPress theme (Astra is the example shown here)." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_wordpress_customizer.jpg 2x"></figure>
<p><span>If your theme has added a separate section to the menu links on the left, go through the settings there one at a time as well. The more you do here, the less customizing you’ll have to do on a page-by-page basis. </span></p>
<h4 id="toc-yaf6-the-best-wordpress-themes-on-themeforest"><span>The Best WordPress Themes on ThemeForest</span></h4>
<p><span>While you can do a lot with free themes, there are limits to what you can accomplish with them. If you are creating professional WordPress sites, eventually you will want to explore paid themes. </span></p>
<p><span>You’ll find thousands of the </span><a href="https://themeforest.net/popular_item/by_category?category=wordpress" data-action="click->ga-analytics#sendMarketClickEvent"><span>best WordPress themes ever created on ThemeForest</span></a><span>. These high-quality WordPress themes will improve the website experience for both you and your visitors. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/15-best-wordpress-business-themes--cms-26132"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">25 Best WordPress Corporate and Business Themes for Entrepreneurs for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">20 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-ecommerce-wordpress-themes--cms-30089"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/30089/preview_image/ecommerce_pre.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">26 Best eCommerce WordPress Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">15 Aug 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-responsive-wordpress-themes--cms-29973"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">31+ Best Responsive WordPress Themes (For Sites in 2024)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">07 Sep 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/cheap-wordpress-themes--cms-34526"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/34526/preview_image/cheap.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/34526/preview_image/cheap.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/34526/preview_image/cheap.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/34526/preview_image/cheap.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/34526/preview_image/cheap.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/34526/preview_image/cheap.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">20+ Best Cheap WordPress Themes (Quality Budget Website Designs for 2024)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">15 Jan 2024</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h3 id="toc-xvzw-step-5-install-wordpress-plugins"><span>Step 5: Install WordPress Plugins</span></h3>
<p><span>Plugins are code that you add to your site for extra features and functionality. But don’t worry: you don’t actually work with the code. You’ll make decisions about how you want each plugin to work using a variety of settings.</span></p>
<p><span>To install a plugin, go to </span><strong>Plugins > Add New</strong><span>. From here, you can choose from popular plugins or search for plugins with specific features. Click the </span><strong>Install</strong><span> button to install a plugin and then the </span><strong>Activate</strong><span> button to activate it.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg" alt='The Plugins screen in WordPress. Here a user has installed Elementor among other "elementor" search-related plugins' loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg" alt='The Plugins screen in WordPress. Here a user has installed Elementor among other "elementor" search-related plugins' loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg" alt='The Plugins screen in WordPress. Here a user has installed Elementor among other "elementor" search-related plugins' loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_plugins.jpg 2x"></figure>
<p><span>Learn more about installing plugins in our guide.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-add-plugins-to-wordpress--cms-34369"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/369/posts/34369/preview_image/How-to-Install-Any-Free-Premium-WordPress-Plugin-wp.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add Plugins to WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/369/profiles/1609/profileImage/jessica%20thornsby.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Jessica Thornsby</div>
<div class="roundup-block__published-date">13 Dec 2019</div>
</div>
</div>
</div>
</div></a></li></ul>
<p><span>Once activated, you can manage your plugins from the </span><strong>Plugins</strong><span> screen. Here you can update plugins, deactivate and activate them, and delete them if you no longer need them. It’s wise to keep your plugins up to date so they stay fast and secure enough to use.</span></p>
<p><span>Also check the menu on the left. You’ll find your new plugin has settings to configure there as well. Some plugins may appear under menu links like </span><strong>Settings </strong><span>or </span><strong>Tools </strong><span>while others have their own freestanding menu area. </span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg" alt="After installing a plugin, users should check the WordPress menu on the left to see if there are additional plugin settings to configure. In this example, we see Elementor's Element Manager panel." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg" alt="After installing a plugin, users should check the WordPress menu on the left to see if there are additional plugin settings to configure. In this example, we see Elementor's Element Manager panel." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg" alt="After installing a plugin, users should check the WordPress menu on the left to see if there are additional plugin settings to configure. In this example, we see Elementor's Element Manager panel." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_plugin_settings.jpg 2x"></figure>
<p><span>There are a few plugins I always install on a new WordPress site:</span></p>
<ul>
<li><span>Page builder plugin</span></li>
<li><span>Contact form plugin</span></li>
<li><span>Backup plugin</span></li>
<li><span>Security plugin</span></li>
<li><span>Caching plugin</span></li>
<li><span>SEO plugin</span></li>
</ul>
<p><span>Discover the best WordPress plugins to use in each of these categories by watching our free course:</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/courses/essential-wordpress-plugins"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/16/courses/935/preview_image/essential-wordpress-plugins-400x277.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Essential WordPress Plugins</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/profiles/1328/profileImage/rachel-mccollin-jan2015-tutsplus.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Rachel McCollin</div>
<div class="roundup-block__published-date">20 Feb 2020</div>
</div>
</div>
</div>
</div></a></li></ul>
<p><span>Installing plugins like these will make sure your site is secure and fast, and that people can find it. </span></p>
<h4 id="toc-033e-the-best-wordpress-plugins-on-codecanyon"><span>The Best WordPress Plugins on CodeCanyon</span></h4>
<p><span>The </span><a href="https://wordpress.org/plugins/"><span>WordPress free plugin repository</span></a><span> has tens of thousands to choose from. </span></p>
<p><span>You can also find </span><a href="https://codecanyon.net/popular_item/by_category?category=wordpress" data-action="click->ga-analytics#sendMarketClickEvent"><span>top-quality professional WordPress plugins on CodeCanyon</span></a><span>. These plugins come with free support and lifetime upgrades and can help take your site to the next level. </span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg" alt="The most popular WordPress plugins on the CodeCanyon website in 2024 include Bookly Pro, File Bird, FS Poster, Filter Everything, Ultimate AddOns for WPBakery, and more" loading="lazy" width="870px" height="726px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg" alt="The most popular WordPress plugins on the CodeCanyon website in 2024 include Bookly Pro, File Bird, FS Poster, Filter Everything, Ultimate AddOns for WPBakery, and more" loading="lazy" width="650px" height="543px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg" alt="The most popular WordPress plugins on the CodeCanyon website in 2024 include Bookly Pro, File Bird, FS Poster, Filter Everything, Ultimate AddOns for WPBakery, and more" loading="lazy" width="380px" height="319px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_popular_wordpress_plugins.jpg 2x"></figure>
<p><span>Here are some recommendations to help you get started with WordPress plugins: </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/top-best-wordpress-optimization-plugins--cms-93897"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Top 5 Best WordPress Optimization Plugins in 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Nitish Kumar</div>
<div class="roundup-block__published-date">29 May 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-5-security-plugins-for-wordpress--cms-93712"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/93712/preview_image/technology_security_padlocks_on_a_computer_circui_2022_11_02_17_21_44_utc.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">5 Best Security Plugins for WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Kingsley Ubah</div>
<div class="roundup-block__published-date">24 Jan 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-elementor-wordpress-plugins--cms-108120"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108120/preview_image/elementor.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108120/preview_image/elementor.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108120/preview_image/elementor.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108120/preview_image/elementor.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108120/preview_image/elementor.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108120/preview_image/elementor.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">8 Best Elementor WordPress Plugins for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">21 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-wordpress-email-marketing-plugins-in-2023--cms-93881"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/93881/preview_image/side_view_of_young_customer_service_agent_working_7PFJ3YS.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Best WordPress Email Marketing Plugins in 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2776/profiles/21300/profileImage/otherone.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2776/profiles/21300/profileImage/otherone.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Kingsley Ubah</div>
<div class="roundup-block__published-date">12 Jun 2023</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h3 id="toc-g52i-step-6-add-pages"><span>Step 6: Add Pages</span></h3>
<p><span>You’re probably itching to start creating some content. Before you start, make sure you have all the pages you need. </span></p>
<p><span>When you install a free, generic WordPress theme, the auto-generated design usually includes essential pages like Home, About, and Contact. </span></p>
<p><span>Premium WordPress themes tend to come with much bigger website demos and templates. Depending on the website type, there may be pages like:</span></p>
<ul>
<li><span>Services</span></li>
<li><span>Portfolio</span></li>
<li><span>Projects</span></li>
<li><span>Testimonials</span></li>
<li><span>FAQs</span></li>
<li><span>Staff</span></li>
<li><span>Resources</span></li>
</ul>
<p><span>They may also come with a pre-built shop or blog. Unlike the page examples above, though, these custom post types are managed in different areas in WordPress. </span></p>
<p><span>For now, let’s focus on pages since they house the majority of your website’s content. </span></p>
<p><span>To add a new page, click </span><strong>Pages > Add New</strong><span>. This takes you to the editing screen.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg" alt="A blank canvas appears when a WordPress user creates a new page. On the right are settings for publication." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg" alt="A blank canvas appears when a WordPress user creates a new page. On the right are settings for publication." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg" alt="A blank canvas appears when a WordPress user creates a new page. On the right are settings for publication." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_page.jpg 2x"></figure>
<p><span>Give the page a title and click </span><strong>Save draft</strong><span> in the top-right corner. Repeat this process until you have all the pages set up that you need to start with.</span></p>
<div class="callout-block">
<span class="callout-icon callout-tip"></span>
<div class="callout-message"><span>You can always add more down the road as your business and website needs change.</span></div>
</div>
<p><span>Want a more detailed look at how to create new pages or blog posts on your website? This tutorial will get you started:</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/wordpress-pages-and-posts--cms-34644"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/34644/preview_image/a-beginners-guide-to-using-wordpress-400x277.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add a Page or Post in WordPress</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/265/profileImage/adi.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Adi Purdila</div>
<div class="roundup-block__published-date">20 Feb 2020</div>
</div>
</div>
</div>
</div></a></li></ul>
<h3 id="toc-ec91-step-7-create-your-content"><span>Step 7: Create Your Content</span></h3>
<p><span>Your theme is going to be a huge time saver. Rather than build your website’s pages and layouts from-scratch, a lot of that work will be done for you already.</span></p>
<p><span>That said, the existing content in the template needs to be replaced with your own. </span></p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message"><span>This step is the longest one in this process to complete, but it’s worth taking your time with it. You want your website to look great, be easy to use and read, and help visitors quickly accomplish their goals. It can take some time to piece this together.</span></div>
</div>
<p>Take this process page by page. For pages created by your theme, work on editing the pre-populated content. For new pages you’ve created, add new content using blocks. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg" alt="What it looks like in WordPress when users begin to edit a page or add new content. Using the blocks manager on the left, users select the type of content to add and then customize it in the canvas." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg" alt="What it looks like in WordPress when users begin to edit a page or add new content. Using the blocks manager on the left, users select the type of content to add and then customize it in the canvas." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg" alt="What it looks like in WordPress when users begin to edit a page or add new content. Using the blocks manager on the left, users select the type of content to add and then customize it in the canvas." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_add_content.jpg 2x"></figure>
<p><span>Types of blocks include:</span></p>
<ul>
<li><span>Paragraphs</span></li>
<li><span>Headings</span></li>
<li><span>Lists</span></li>
<li><span>Images</span></li>
<li><span>Videos</span></li>
<li><span>Tables</span></li>
<li><span>Buttons</span></li>
</ul>
<p><span>You can also add formatting with blocks, like spaces, separators, and columns. </span></p>
<p><span>As you install plugins, you may find your list of blocks has expanded as well. For example, a contact form plugin usually adds a form block so you can easily embed it on the page (as opposed to using a shortcode).</span></p>
<h4 id="toc-1yzt-publishing-and-editing"><span>Publishing and Editing</span></h4>
<p><span>Once you’re happy with each page, use the </span><strong>Preview</strong><span> button to see what it looks like on the frontend of your website. When it’s good to go, use the </span><strong>Publish</strong><span> button to make it live. </span></p>
<p><span>By the way, you can edit your pages and custom post types at any time, even after they’ve been published. Just click on </span><strong>Posts</strong><span> or </span><strong>Pages</strong><span> and then select the post or page you want to edit. Make the changes and click the </span><strong>Update</strong><span> button.</span></p>
<h3 id="toc-v5vh-step-8-edit-your-sites-settings"><span>Step 8: Edit Your Site’s Settings</span></h3>
<p><span>So now you’ve got some content. It’s time to tweak the general settings for your site. You’ll do this via the </span><strong>Settings</strong><span> menu.</span></p>
<p><span>Settings you can edit include:</span></p>
<p><strong>General</strong><span>: Add the basics about your website like the site title, URL, admin’s email (if it’s not you) as well as default settings related to where you’re located.</span></p>
<p><strong>Writing</strong><span>: You only need to edit these settings if your website will have a blog. In that case, you can set defaults and enable emailing-in posts (which I wouldn’t recommend).</span></p>
<p><strong>Reading</strong><span>: Designate a page for your home page. It can be one of the pages you just created or your blog feed. In addition, make sure the “Discourage search engines” checkbox is unchecked so that your site can be indexed and ranked in search results. </span></p>
<p><strong>Discussion</strong><span>: If you have a blog, use these settings to determine who can comment and what the rules for commenting are. </span></p>
<p><strong>Media</strong><span>: Set the default image sizes. This isn’t necessary, but it can be helpful if you have multiple people contributing to your site or blog.</span></p>
<p><strong>Permalinks</strong><span>: Enable pretty permalinks here, which will make your URLs look nicer and improve your SEO.</span></p>
<p><strong>Privacy</strong><span>: Set up your privacy policy page. WordPress can help you set one up or you can select a custom one you’ve made on your own (or with a plugin).</span></p>
<h3 id="toc-vsro-step-9-set-up-the-navigation"><span>Step 9: Set Up the Navigation</span></h3>
<p><span>The navigation menu is essential. Without it, people won’t be able to get around your site. </span></p>
<p><span>You can create as many navigation menus as you want by going to </span><strong>Appearance > Menus</strong><span>. However, most websites have just one that appears in the header of their website — either as a horizontal string of links or under a vertical hamburger (dropdown) menu. </span></p>
<p><span>To start, create one for the header. Give it a name like </span><strong>Main Menu</strong><span> and set the </span><strong>Display location</strong><span> to </span><strong>Primary Menu</strong><span>. Click the </span><strong>Create menu</strong><span> button to generate it.</span></p>
<p><span>To build it out, use the panel on the left to add pages, posts, custom links, and categories to the navigation. </span></p>
<p><span>Check the ones you want to include and click </span><strong>Add to Menu</strong><span>. You can then drag-and-drop the various pages so that they appear in the order you want them to. You can also move them inward so that they drop down from a top-level menu link. </span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg" alt="An up-close look at how to create a navigation in WordPress and modify the menu structure by dragging and dropping pages into place" loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg" alt="An up-close look at how to create a navigation in WordPress and modify the menu structure by dragging and dropping pages into place" loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg" alt="An up-close look at how to create a navigation in WordPress and modify the menu structure by dragging and dropping pages into place" loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108384/image-upload/howtousewordpress_create_navigation.jpg 2x"></figure>
<p><span>Save your changes. </span></p>
<p><span>If you open up your website now, you should see all of these pages — in this order and hierarchy — at the top of your site. </span></p>
<h3 id="toc-8lmi-step-10-manage-your-site"><span>Step 10: Manage Your Site</span></h3>
<p><span>Once you’ve created your site and added content to it, your job isn’t done. You’ll need to manage it on an ongoing basis.</span></p>
<p><span>This includes:</span></p>
<ul>
<li>
<span>Keeping the software up to date — both WordPress itself and your themes and plugins. You’ll see alerts on the </span><strong>Dashboard </strong><span>> </span><strong>Updates </strong><span>screen when new updates are available.</span>
</li>
<li><span>Adding new content on a regular basis.</span></li>
<li><span>Dealing with any security and performance issues.</span></li>
<li><span>Working on your SEO to get more visitors.</span></li>
<li><span>Sharing your content via social media and other channels (which you can automate with a range of plugins).</span></li>
</ul>
<p><span>Keep on top of your website, and it will work harder for you. A stagnant site will drop through the search engine rankings and end up costing you more than it’s worth. </span></p>
<p><span>But if you manage it regularly, it will remain a valuable asset for you and your business.</span></p>
<h2 id="toc-vy0c-summary"><span>Summary</span></h2>
<p><span>If your goal is to build a great website, WordPress is the way to go. </span></p>
<p><span>Working with WordPress isn’t as difficult as some people may tell you. Once you’ve installed the software and gotten acquainted with the admin screens, that’s when the fun begins. </span></p>
<p><span>While you could easily throw something together in a couple hours, spend some time with your site. Find a beautiful WordPress theme for it, add cool features and functionality, and create content that captures the attention of visitors and makes them want to take action. </span></p>
<p><span>Over time, you’ll see your content expand and your visitor numbers grow. Enjoy!</span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/34622/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34622/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34622/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34622/a2t.img" width="1" /></div>
2024-01-29 09:16:00 UTC
2024-01-29 09:16:00 UTC
Rachel McCollin
tag:code.tutsplus.com,2005:PostPresenter/cms-108362
2023-12-28T18:37:50+00:00
Create a Currency Converter with HTML, CSS, and Vanilla JavaScript
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ihkj{background-color:rgb(191, 234, 200);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="izff"><p>Let’s create a fully functional currency converter application using HTML, CSS, and vanilla JavaScript. By the end of this tutorial, we will have a responsive currency app that fetches real-time data with the Exchange Rate API and presents it in a user-friendly interface.</p></div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="ihkj"><div class="full-width-section__content-container div-container" id="ikdy"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5xc">
<h2 id="toc-e745-our-currency-converter-demo">Our Currency Converter Demo</h2>
<p>To create your own currency converter, you’ll need to register your own API key from <a href="https://www.exchangerate-api.com/" target="_blank" rel="noopener">exchangerate-api.com</a>.</p>
<p><iframe src="https://codepen.io/tutsplus/embed/rNRebdQ?default-tab=result" width="850" height="800" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<p>I based this design loosely on the excellent <a href="https://dribbble.com/shots/19533571-Crypto-exchange-platform" target="_blank" rel="noopener">Crypto exchange platform</a> by Yev Ledenov on Dribbble. </p>
</div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ipwb">
<h2 id="toc-i0mz-html-structure">HTML Structure</h2>
<p><span>Our currency application will have a simple interface containing :</span></p>
<ul>
<li><span>An input field for the amount to be converted.</span></li>
<li><span>A drop-down to select the from Currency value</span></li>
<li><span>A second drop-down to select the to currency value</span></li>
<li><span>A convert button</span></li>
<li><span>A <a href="https://webdesign.tutsplus.com/html-element-p--cms-93847a" target="_blank" rel="noopener"><code><p></code></a> tag to show the converted amount</span></li>
<li><span>A <code><p></code> tag to show any errors that might occur during the conversion process.</span></li>
</ul>
<p>The HTML code will look like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"currency-container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h1></span>Currency converter<span style="color: #f4bf75"></h1></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"input-box"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"amount"</span><span style="color: #f4bf75">></span>Enter amount<span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"text"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"amount"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"100"</span> <span style="color: #6a9fb5">required</span><span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"currency"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"box"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><select</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"select-option"</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"from-currency"</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"fromCurrency"</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><option</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"USD"</span><span style="color: #f4bf75">></span>United States Dollar<span style="color: #f4bf75"></option></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></select></span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span>TO<span style="color: #f4bf75"></span></span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"box"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><select</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"select-option"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"to-currency"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"toCurrency"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><option</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"USD"</span><span style="color: #f4bf75">></span>United States Dollar<span style="color: #f4bf75"></option></span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></select></span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"convert"</span><span style="color: #f4bf75">></span>Convert<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"result"</span><span style="color: #f4bf75">></p></span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"error"</span><span style="color: #f4bf75">></p></span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<p>Currently, we are using the option value as a placeholder. We will replace and add more option data dynamically with JavaScript.</p>
<h2 id="toc-t90e-styking-with-css">Styling With CSS</h2>
<p>Let’s start with some basic styles. We’ve pulled in the rather excellent <a href="https://fonts.google.com/specimen/Bricolage+Grotesque" target="_blank" rel="noopener">Bricolage Grotesque</a> font from Google fonts too:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">*</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-sizing</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">border-box</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-family</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">'Bricolage Grotesque'</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">sans-serif</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">h1</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">bold</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">.5em</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">line-height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">.8</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.container</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">min-height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100vh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#202020</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2em</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#040203</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">flex-direction</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">column</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.currency-container</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">fit-content</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#7cb889</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">40px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>For the input and label (including the placeholder in the input) they will have the following styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.input-box</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">flex-direction</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">column</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">label</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.5em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">.4em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">#amount</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">300px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #f4bf75">black</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">transparent</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #f4bf75">black</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">#amount</span><span style="color: #d0d0d0;background-color: #151515">:focus</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #f4bf75">white</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">outline</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">::placeholder</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgba</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span><span style="color: #90a959">0.6</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">opacity</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span> <span style="color: #949494">/* Firefox */</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Next, we will apply styling to the box elements containing the <strong>From</strong> and <strong>To</strong> currency drop-downs. The drop-down elements will be arranged in a column layout using Flexbox and centered vertically and horizontally. We also have a gap between the box elements, some padding, and a border radius.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.currency</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">flex-direction</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">column</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">gap</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.5rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.box</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p> The select-option will have the following styles</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.select-option</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">16px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#333</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">block</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">700</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">line-height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.3</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">outline</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #f4bf75">black</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Finally, the convert button, the result, and the error message elements will have the following styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">button</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.5em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #f4bf75">black</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#fff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.result</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #f4bf75">black</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2.5em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.error</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#800020</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">12px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-5ywd-javascript-functunality">JavaScript Functionality</h2>
<p><span>The JavaScript functionality will have two parts:</span></p>
<ul>
<li><span>Getting the currency code, currency name, and flag from the REST countries API</span></li>
<li><span>getting conversion rate from the Exchange Rate API</span></li>
</ul>
<h3 id="toc-yurg-currencies-api">REST Countries API</h3>
<p><span>The </span><a class="editor-rtfLink" href="https://restcountries.com/" target="_blank" rel="noopener"><span>REST countries API</span></a><span> provides an API with the endpoint <a href="https://restcountries.com/v3.1/all" target="_self">https://restcountries.com/v3.1/all</a> where you can filter results by providing the fields you are interested in. In our case, we want the country flag, currency name, and currency code and the endpoint will look like this:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>https://restcountries.com/v3.1/all?fields=currencies,flag
</pre></td>
</tr></tbody></table></div>
<p>The resulting sample data will look like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>{
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> "name": {
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> "common": "Eritrea",
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> "official": "State of Eritrea",
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> "nativeName": {
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> "ara": {
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> "official": "دولة إرتريا",
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> "common": "إرتريا"
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> },
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> "eng": {
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> "official": "State of Eritrea",
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> "common": "Eritrea"
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> },
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> "tir": {
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> "official": "ሃገረ ኤርትራ",
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> "common": "ኤርትራ"
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> }
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> }
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> },
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> "currencies": {
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> "ERN": {
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> "name": "Eritrean nakfa",
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> "symbol": "Nfk"
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> }
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> },
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> "flag": "🇪🇷"
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> },
</pre></td>
</tr>
</tbody></table></div>
<p>To make it easier to display our currencies, we will fetch the data and store it in a JavaScript file. The script for fetching the data will look like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">url</span> <span style="color: #d0d0d0">=</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">https://restcountries.com/v3.1/all?fields=name,currencies,flag</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">fetch</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">url</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">then</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">response</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0;background-color: #151515">response</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">json</span><span style="color: #d0d0d0">())</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">then</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">result</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">[];</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">Object</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">keys</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">currencies</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">length</span> <span style="color: #d0d0d0">></span><span style="color: #90a959">0</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">result</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">push</span><span style="color: #d0d0d0">({</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">countryname</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">common</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">Object</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">values</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">currencies</span><span style="color: #d0d0d0">)[</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">].</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">code</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">Object</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">keys</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">currencies</span><span style="color: #d0d0d0">)[</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">],</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">flag</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">flag</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">result</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">sort</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">a</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">b</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0;background-color: #151515">a</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">localeCompare</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">b</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">));</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">jsonString</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">JSON</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">stringify</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">result</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">null</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">jsonString</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The code above does the following:</p>
<ul>
<li>We use the <code>fetch()</code> method to make an HTTP request to the REST countries API.</li>
<li>Then, we convert the response to JSON format and start processing the data.</li>
<li>From the response JSON, we first check if each country has a currency code since not all countries have a currency code.</li>
<li>If a country has a currency, we create an object with its name, code, and currency name and push it to the empty result array.</li>
<li>Then we sort the currency code alphabetically.</li>
<li>Finally, we convert the result to JSON and print the <span>stringified</span> data to the console.</li>
</ul>
<p>When you run the script in a browser environment, you should be able to copy the data to your JavaScript file. The data looks like this:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1885/posts/108362/image-upload/currencies_1_.png" loading="lazy" width="870px" height="370px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1885/posts/108362/image-upload/currencies_1_.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1885/posts/108362/image-upload/currencies_1_.png" loading="lazy" width="650px" height="279px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1885/posts/108362/image-upload/currencies_1_.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1885/posts/108362/image-upload/currencies_1_.png" loading="lazy" width="380px" height="168px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1885/posts/108362/image-upload/currencies_1_.png 2x"></figure>
<p>Alternatively, add this <a href="https://essykings.github.io/JavaScript/currency.js" target="_self">link</a> to your script using the <code>src</code> attribute.</p>
<p>Next, let’s get the select elements.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">fromCurrency</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">fromCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">toCurrency</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">toCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Since we have the data in an array, it’s now easier to append the currencies to the option elements of the fromCurrency and toCurrency select elements.</p>
<p>Create a function called <code>addCurrency()</code>. Inside the <code>addCurrency()</code> function, we use the <code>forEach()</code> function to loop through the currencies array; for each iteration, we want to add the currency code to the option element and append the option element to both the select elements.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">result</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currencies</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">optionFrom</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionFrom</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">select-option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionFrom</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span> <span style="color: #d0d0d0">===</span> <span style="color: #90a959">"</span><span style="color: #90a959">USD</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionFrom</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">selected</span> <span style="color: #d0d0d0">=</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionFrom</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">text</span> <span style="color: #d0d0d0">=</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">flag</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> - </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">fromCurrency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">optionFrom</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">optionTO</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionTO</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">select-option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionTO</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span> <span style="color: #d0d0d0">===</span> <span style="color: #90a959">"</span><span style="color: #90a959">EUR</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionTO</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">selected</span> <span style="color: #d0d0d0">=</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">optionTO</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">text</span> <span style="color: #d0d0d0">=</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">flag</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> - </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">currency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">toCurrency</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">optionTO</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>In the code above, we use the <code>ForEach()</code> function to iterate on each the currencies array data and do the following:</p>
<ul>
<li>Extracts the currency key from the currencies array for each currency</li>
<li>gets the flag</li>
<li>gets the currency name</li>
<li>Creates an HTML option element for the "<code>fromCurrency</code>" select dropdown . </li>
<li>sets the option value to the currency code</li>
<li>Sets the option text to a combination of the flag, the currency name, and the currency code</li>
<li>Appends the created option element to the "<code>fromCurrency</code>" select dropdown.</li>
<li>Creates another option element for the "<code>toCurrency</code>" select dropdown with the same data as the <code>fromCurrency</code>
</li>
<li>Appends the created option element to the "toCurrency" select dropdown.</li>
<li>Finally we invoke the <code>addCurrency()</code> function to apply the functionality.</li>
</ul>
<p>The option value will be the currency code, and the option text will be the currency flag, currency code, and currency name separated by a hyphen.</p>
<p>We also set the default currency in the <code>fromCurrency</code> option element to USD and the default currency for the <code>toCurrency</code> option element to EUR.</p>
<p>Now our drop down are showing the currencies.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1885/posts/108362/image-upload/currency_option.png" loading="lazy" width="870px" height="804px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1885/posts/108362/image-upload/currency_option.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1885/posts/108362/image-upload/currency_option.png" loading="lazy" width="650px" height="601px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1885/posts/108362/image-upload/currency_option.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1885/posts/108362/image-upload/currency_option.png" loading="lazy" width="380px" height="352px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1885/posts/108362/image-upload/currency_option.png 2x"></figure>
<h3 id="toc-z2xz-code-refactoring">Code Refactoring</h3>
<p>From the <code>addCurrency()</code> function you can see that we are repeating the same code to add the option values. Let’s create another function for generating the options for each currency element.</p>
<p>The function will look like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">createOption</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">defaultCode</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">element</span> <span style="color: #d0d0d0">){</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #949494">// console.log(country);
</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">option</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">select-option</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span> <span style="color: #d0d0d0">===</span> <span style="color: #d0d0d0;background-color: #151515">defaultCode</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">selected</span> <span style="color: #d0d0d0">=</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">text</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">flag</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">code</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> - </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">name</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">element</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">option</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The <code>createOption()</code> function takes three parameters: the country object, the default code, and the element where the options will be appended. </p>
<p>Next, update the addCurrency() function as follows:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">addCurrency</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">result</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">countries</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">map</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">createOption</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">USD</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">fromCurrency</span> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">createOption</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">country</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">EUR</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">toCurrency</span> <span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The function is now easier to read since we don’t have any repetitive code.</p>
<h3 id="toc-rv2a-currency-conversion">Currency Conversion</h3>
<p><span>We will use the ExchangeRate API for currency conversion. The ExchangeRate API provides currency conversion rates for 161 currencies.</span></p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">
<span>Head over to </span><a class="editor-rtfLink" href="https://www.exchangerate-api.com/" target="_blank" rel="noopener"><span>www.exchangerate-api.com</span></a> <span>and get a Free API key</span>
</div>
</div>
<p><span>The API allows developers to convert currencies by providing a pair of currency codes in the request. For example, if you want to convert USD to EUR, your API call will look like this:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>https://v6.exchangerate-api.com/v6/24faec6b42da4a96ceea41d3/pair/USD/EUR
</pre></td>
</tr></tbody></table></div>
<p>The endpoint will give us the following result.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table shell"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"result"</span>: <span style="color: #90a959">"success"</span>,
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"documentation"</span>: <span style="color: #90a959">"https://www.exchangerate-api.com/docs"</span>,
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"terms_of_use"</span>: <span style="color: #90a959">"https://www.exchangerate-api.com/terms"</span>,
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"time_last_update_unix"</span>: 1703721602,
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"time_last_update_utc"</span>: <span style="color: #90a959">"Thu, 28 Dec 2023 00:00:02 +0000"</span>,
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"time_next_update_unix"</span>: 1703808002,
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"time_next_update_utc"</span>: <span style="color: #90a959">"Fri, 29 Dec 2023 00:00:02 +0000"</span>,
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"base_code"</span>: <span style="color: #90a959">"USD"</span>,
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"target_code"</span>: <span style="color: #90a959">"EUR"</span>,
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"conversion_rate"</span>: 0.9015
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Since we already have the codes in our select options, we will pass the values in the API and multiply the conversion rate by the amount to get the result. </p>
<p>Create a function called <code>convertCurrency()</code> function. In the function:</p>
<ul>
<li>get the display element</li>
<li>get the values from the selected options</li>
<li>Store the url in a variable.</li>
</ul>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">BASE_URL</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`https://v6.exchangerate-api.com/v6/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">apiKey</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">fromCurrrencyCode</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">fromCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">toCurrencyCode</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">toCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">result</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.result</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">error</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.error</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Ensure you supply your API key from the Exchange Rate API. You can obtain one for free <a href="https://www.exchangerate-api.com/" target="_self">here</a>.</p>
<p>In the <code>convertCurrency()</code> function, we first check if a valid amount has been entered, and if true, we perform a GET request to the exchange rate API with the currency pairs.</p>
<p>The response will contain the conversion rate. Finally we update the result with a formatted converted amount</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">convertCurrency</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">BASE_URL</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`https://v6.exchangerate-api.com/v6/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">apiKey</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">fromCurrrencyCode</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">fromCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">toCurrencyCode</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">toCurrency</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">result</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.result</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">error</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.error</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">fromCurrrencyCode</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">toCurrencyCode</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">input</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">!==</span> <span style="color: #90a959">""</span> <span style="color: #d0d0d0">&&</span> <span style="color: #d0d0d0;background-color: #151515">parseFloat</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">amount</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">>=</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">url</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">BASE_URL</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">/pair/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">fromCurrrencyCode</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">toCurrencyCode</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">url</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">fetch</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">url</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">then</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">resp</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0;background-color: #151515">resp</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">json</span><span style="color: #d0d0d0">())</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">then</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">conversion_rate</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">conversionResult</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">*</span> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">conversion_rate</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">toFixed</span><span style="color: #d0d0d0">(</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">2</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">formattedResult</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">conversionResult</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">replace</span><span style="color: #d0d0d0">(</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #75b5aa">/</span><span style="color: #8f5536">\B(?=(\d{3})</span><span style="color: #75b5aa">+</span><span style="color: #8f5536">(?!\d))</span><span style="color: #75b5aa">/g</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">"</span><span style="color: #90a959">,</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">result</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">amount</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">fromCurrrencyCode</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> = </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">formattedResult</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">toCurrencyCode</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">amount</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959"> </span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">})</span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #aa759f">catch</span><span style="color: #d0d0d0">(()</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">error</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">An error occured, please try again later </span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">else</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">alert</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">Please enter an amount</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>If an error occurs, we display a message to the user, letting them know something went wrong. </p>
<p>For the conversion to work, let’s add an event listener to the convert button and invoke the <code>convertCurrency()</code> function, as shown below.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">convertBtn</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.convert</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">convertBtn</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">convertCurrency</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-ypau-final-result">Final Result</h3>
<p>Here is the final result!</p>
<p><iframe src="https://codepen.io/tutsplus/embed/rNRebdQ?default-tab=result" width="850" height="800" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<h2 id="toc-n0rk-conclusion">Conclusion</h2>
<p>This tutorial has covered how to build a currency converter that fetches real-time data from the Exchange Rate API. Ensure you get your free API key from the ExchangeRateAPI, and have fun building things!</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/108362/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108362/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108362/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108362/a2t.img" width="1" /></div>
2024-01-18 10:56:00 UTC
2024-01-18 10:56:00 UTC
Esther Vaati
tag:code.tutsplus.com,2005:PostPresenter/cms-108322
2023-12-19T07:19:08+00:00
Learn How to Code a Simple JavaScript Calendar and Datepicker
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i5zu{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i7to"><p>Building a JavaScript calendar is the best way to understand date functionalities in JavaScript. This tutorial will create a real-time calendar similar to the one in your digital devices. By the end, you’ll have something like this:</p></div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="i5zu"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ie9h"><p><iframe src="https://codepen.io/tutsplus/embed/jOdggxy?default-tab=result" width="850" height="850" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p></div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ihxn">
<h2 id="toc-ravw-html-strucure">HTML Structure</h2>
<p>We will start our JavaScript calendar by building the structure with HTML and CSS. Once the interface is done, we will replace the functionality with JavaScript.</p>
<p>The HTML structure will contain a header showing the current month and year. Then, we will have arrows to navigate to the next or previous month, and lastly, we will have a grid showing the names of the days in a week and each day of the month.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"calendar"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><header></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><pre</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"left"</span><span style="color: #f4bf75">></span>◀<span style="color: #f4bf75"></pre></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"header-display"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"display"</span><span style="color: #f4bf75">></span>""<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><pre</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"right"</span><span style="color: #f4bf75">></span>▶<span style="color: #f4bf75"></pre></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></header></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"week"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Su<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Mo<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Tu<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>We<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Th<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Fr<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div></span>Sa<span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"days"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #949494"><!--days will be filled here--></span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"display-selected"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"selected"</span><span style="color: #f4bf75">></p></span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<p>Inside the <code>div</code> with the class days, we will fill our days dynamically with JavaScript.</p>
<h2 id="toc-df9c-styling-with-css">Styling Calendar With CSS</h2>
<p>Lets start by applying some styles to the body and the container element.</p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">I’ve based this design on the rather lovely UI design work of <a href="https://dribbble.com/shots/20239908-Date-Picker-component" target="_blank" rel="noopener">Andrey Axelrod on Dribbble</a>. Check out his work!</div>
</div>
<p>We’ll begin by settings some variables for our colors. Then the calendar will be centered in the container element and have a border radius to make it rounded. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/*variables*/</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">:root</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#fff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--main</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#eaedf0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--accent</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#0041ff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--accent-2</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#ebedf0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/*styles*/</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">body</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--main</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.container</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">inline-block</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">35px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #90a959">1em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The header elements, including a <code>p</code> tag and two arrows, will use Flexbox with the items spread across the x-axis and spaced evenly. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">header</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">space-between</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.header-display</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.header-display</span> <span style="color: #f4bf75">p</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--accent</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.2rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">word-spacing</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0.5rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">pre</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">cursor</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">pointer</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.2rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--accent</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-as7a-grid-layout">Calendar Grid Layout</h3>
<p>The <code>div</code>s containing the names of days in a week and the days in a month will use a grid layout of 7 equal columns and will be centered horizontally.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.days</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.week</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">grid</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">repeat</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">7</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">space-between</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.week</span> <span style="color: #f4bf75">div</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.days</span> <span style="color: #f4bf75">div</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3rem</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>We will also add a hover effect on each day of the week and an opacity to the names of the days of the week. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.days</span> <span style="color: #f4bf75">div</span><span style="color: #d0d0d0;background-color: #151515">:hover</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--accent-2</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgb</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">25</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">25</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">201</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">cursor</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">pointer</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.week</span> <span style="color: #f4bf75">div</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">opacity</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0.5</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>We will also display the date when a day in the calendar is clicked and apply a background color to today’s date.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.current-date</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--accent</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.display-selected</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108322/image-upload/fianl_design.jpg" alt="datepicker ui design" loading="lazy" width="870px" height="681px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108322/image-upload/fianl_design.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108322/image-upload/fianl_design.jpg" alt="datepicker ui design" loading="lazy" width="650px" height="510px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108322/image-upload/fianl_design.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108322/image-upload/fianl_design.jpg" alt="datepicker ui design" loading="lazy" width="380px" height="300px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108322/image-upload/fianl_design.jpg 2x"></figure>
<h2 id="toc-kvcj-javascript-functuanality">JavaScript Calendar Functionality</h2>
<p>Okay, that’s given us our structure, now let’s focus on the behavior. We’ll start by selecting all the elements that will need to be updated.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">display</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.display</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">previous</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.left</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">next</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.right</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">days</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.days</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">selected</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.selected</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-oj2u-date-object">Date() Object</h3>
<p>JavaScript comes with <a href="https://webdesign.tutsplus.com/how-to-add-and-subtract-time-from-a-date-in-javascript--cms-37207t" target="_self">an inbuilt <code>Date()</code> object</a> that makes it easy to work with dates. To get the current date, you can use the <code>new Date()</code> object like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">dateToday</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">dateToday</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">()</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<p>You can also use the date object methods to get various parts of the date, such as the year, month, day of the week, etc.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getFullYear</span><span style="color: #d0d0d0">());</span> <span style="color: #949494">//2023
</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getMonth</span><span style="color: #d0d0d0">());</span> <span style="color: #949494">//11
</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getDate</span><span style="color: #d0d0d0">());</span> <span style="color: #949494">//12
</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getHours</span><span style="color: #d0d0d0">());</span> <span style="color: #949494">//13
</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getMinutes</span><span style="color: #d0d0d0">());</span> <span style="color: #949494">//9
</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">dateToday</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getSeconds</span><span style="color: #d0d0d0">());</span><span style="color: #949494">//35</span>
</pre></td>
</tr>
</tbody></table></div>
<div class="callout-block">
<span class="callout-icon callout-warn"></span>
<div class="callout-message">One important thing to note when working with the <code>Date()</code> object is, months are zero-based, meaning January is represented by 0, February by 1, and so on. Thus, our output for <code>get.Month()</code>, which equals 11, means we are in December.</div>
</div>
<p>Start by defining a variable <code>date</code> using the Date object and get the month’s and year’s values.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">year</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getFullYear</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getMonth</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Create a function called <code>displayCalendar</code> and <span>update the header to show the current month and year. </span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">formattedDate</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">toLocaleString</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">en-US</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">month</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">long</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">year</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">numeric</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">formattedDate</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
</tbody></table></div>
<p><span>Invoke the </span><code>displayCalendar()</code> <span>function to display the header functionality. Now, the header displays the current month and year.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108322/image-upload/date.jpg" alt="JavaScript Calendar" loading="lazy" width="870px" height="233px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108322/image-upload/date.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108322/image-upload/date.jpg" alt="JavaScript Calendar" loading="lazy" width="650px" height="178px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108322/image-upload/date.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108322/image-upload/date.jpg" alt="JavaScript Calendar" loading="lazy" width="380px" height="110px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108322/image-upload/date.jpg 2x"></figure>
<h3 id="toc-4wfa-displaying-the-calendar">Displaying the Calendar</h3>
<p>Next, update the <code>displayCalendar()</code> function as follows:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">displayCalendar</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">firstDay</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">year</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">month</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">firstDayIndex</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">firstDay</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getDay</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">lastDay</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">year</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">+</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">numberOfDays</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">lastDay</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getDate</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<ul>
<li>
<code>const firstDay = new Date(year, month, 1);</code>: Creates a new Date object representing the first day of the current month. </li>
<li>
<code>const firstDayIndex = firstDay.getDay();</code>: Here, we use the value of <code>firstDay</code> to get the index of the first day of the week. For example, 0 represents Sunday, 1 represents Monday, and so on. </li>
<li>
<code>const lastDay = new Date(year, month + 1, 0);</code>: Creates a new Date object representing the last day of the current month. </li>
<li>
<code>const <span>numberOfDays</span> = lastDay.getDate();</code>: Here, we use the value of <code>lastDay</code> to get the index of the last day of the month. This value will allow us to get the exact days in a month. For example, if a month has 31 days, <code><span>numberOfDays</span></code> will be 31</li>
</ul>
<p>From the value of <code>firstDayIndex</code>, we know when the first day of the month will start. For example, for December 2023, the first day of the month will start at index 5, on a Friday. The calendar should be blank from index 0 (Sunday) to index 4 (Thursday). Let’s use <code>firstDayIndex</code> to create a for loop that will add empty divs to the start of the calendar. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">for</span> <span style="color: #d0d0d0">(</span><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">x</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span> <span style="color: #d0d0d0;background-color: #151515">x</span> <span style="color: #d0d0d0"><=</span> <span style="color: #d0d0d0;background-color: #151515">firstDayIndex</span><span style="color: #d0d0d0">;</span> <span style="color: #d0d0d0;background-color: #151515">x</span><span style="color: #d0d0d0">++</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">div</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">div</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">+=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">days</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>To display the days in a month, we will create another for loop that will add divs equal to the value of <code>numberOfDays</code>. Each div will also contain the day of the month matched correctly to the day of the week. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">for</span> <span style="color: #d0d0d0">(</span><span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">i</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span> <span style="color: #d0d0d0;background-color: #151515">i</span> <span style="color: #d0d0d0"><=</span> <span style="color: #d0d0d0;background-color: #151515">numberOfDays</span><span style="color: #d0d0d0">;</span> <span style="color: #d0d0d0;background-color: #151515">i</span><span style="color: #d0d0d0">++</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">div</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">div</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">let</span> <span style="color: #d0d0d0;background-color: #151515">currentDate</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">year</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">month</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">i</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">dataset</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">date</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currentDate</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">toDateString</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">+=</span> <span style="color: #d0d0d0;background-color: #151515">i</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">days</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">currentDate</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getFullYear</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">===</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">getFullYear</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">&&</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">currentDate</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getMonth</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">===</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">getMonth</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">&&</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">currentDate</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getDate</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">===</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">getDate</span><span style="color: #d0d0d0">()</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">current-date</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The <code>for</code> loop does the following:</p>
<ul>
<li>Creates div elements representing each day in a month</li>
<li>Adds a dataset attribute called date to each div containing a date matching the current day, month, and year. The data attribute will be helpful when we want to determine which date has been clicked. </li>
<li>Appends each div to our days element.</li>
<li>We are also adding a different CSS class to the div, which matches the current date. </li>
</ul>
<p>Now, our JavaScript calendar is displaying the correct date.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108322/image-upload/day.jpg" alt="current day" loading="lazy" width="870px" height="222px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108322/image-upload/day.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108322/image-upload/day.jpg" alt="current day" loading="lazy" width="650px" height="170px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108322/image-upload/day.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108322/image-upload/day.jpg" alt="current day" loading="lazy" width="380px" height="106px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108322/image-upload/day.jpg 2x"></figure>
<h3 id="toc-2mna-selecting-a-date">Selecting a Date</h3>
<p>We also want to listen for a click event when a day is clicked and do the following:</p>
<ul>
<li>retrieve the <code>currentDate</code> value from the data attribute of the clicked element</li>
<li>display the selected date on the screen. </li>
</ul>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">displaySelected</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">dayElements</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelectorAll</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.days div</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">dayElements</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">forEach</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">day</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">day</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">selectedDate</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">target</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">dataset</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">selected</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`Selected Date : </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">selectedDate</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">displaySelected</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
</tbody></table></div>
<p>In the code above, we iterate through the day elements, assigning a click event listener to each div element. When clicked, we retrieve the current date from the data-date attribute and update the display element with the formatted current date.</p>
<p>The <code>displaySelected()</code> function is then invoked. </p>
<p>You should see the following label displayed at the bottom of the UI when you click any date.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108322/image-upload/selected.jpg" alt="JS Calendar" loading="lazy" width="870px" height="358px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108322/image-upload/selected.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108322/image-upload/selected.jpg" alt="JS Calendar" loading="lazy" width="650px" height="271px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108322/image-upload/selected.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108322/image-upload/selected.jpg" alt="JS Calendar" loading="lazy" width="380px" height="163px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108322/image-upload/selected.jpg 2x"></figure>
<h3 id="toc-ueff-final-functionality">Final JavaScript Calendar Functionality</h3>
<p>The final functionality is to ensure the correct month and year are displayed when the prev and next elements are clicked. </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">previous</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">days</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">selected</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0"><</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">11</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">year</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">year</span> <span style="color: #d0d0d0">-</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">-</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">console</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">log</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">month</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">setMonth</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">month</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">displayCalendar</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">displaySelected</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>In the code above:</p>
<ul>
<li>
<code> days.innerHTML = ""; </code>: Clears the content of HTML div elements for the current month.</li>
<li>
<div>
<div>
<code><span>selected</span><span>.</span><span>innerHTML</span><span>=</span><span>"";</span></code><span> : Clears the contents of the <code>currentDate</code>.</span>
</div>
</div>
</li>
<li>In the for loop, we first check if the current month is less than 0 (January ). If true, we set the month to December (December has index 11) and also decrease the year by 1. If false, we decrement the month only.</li>
<li>
<code>dateToday.setMonth(month);</code> : sets the month to the newly updated month. Finally, we invoke the <code>displayCalendar()</code> and <code>displaySelected()</code> functions.</li>
</ul>
<p>For the next element, we check if the month is greater than 11 (December) and if true, we set the month to 0 and increment the year to the next year. Otherwise, we increment the month by 1.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">next</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">days</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">selected</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">></span> <span style="color: #90a959">11</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">year</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">year</span> <span style="color: #d0d0d0">+</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">month</span> <span style="color: #d0d0d0">+</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">date</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">setMonth</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">month</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">displayCalendar</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">displaySelected</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-fo96-conclusion">Conclusion</h2>
<p>This tutorial has covered how to use JavaScript to create a fully functional calendar dynamically. Hopefully, you’ve learned a lot, and you are now in a position to create dynamic JavaScript calendars for different purposes!</p>
<p><iframe src="https://codepen.io/tutsplus/embed/jOdggxy?default-tab=result" width="850" height="850" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/108322/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108322/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108322/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/108322/a2t.img" width="1" /></div>
2024-01-16 15:03:00 UTC
2024-01-16 15:03:00 UTC
Esther Vaati
tag:code.tutsplus.com,2005:PostPresenter/cms-93502
2024-01-01T21:41:06+00:00
Build a Simple YouTube App with Vanilla JavaScript
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i622j{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i6vqo">
<p><a href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q" target="_blank" rel="noopener">The Tuts+ YouTube channel</a> is fast approaching 1.5M subscribers. Let’s celebrate this great achievement by creating something YouTube-oriented! We’re going to build a simple, yet fully functional YouTube app with Vanilla JavaScript.</p>
<p>The concept will be pretty straightforward; we’ll build a simple UI where we can enter the ID of a channel and our app will return info about it.</p>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="i622j"><div class="full-width-section__content-container div-container">
<div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iobz4">
<h2 id="toc-2y5w-what-well-be-building">What We’ll be Building</h2>
<p>As I often provide, here’s an introductory video to give you a taste of the app that we’re going to create:</p>
<figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=7N7hWeHEN8k&t=0">
<iframe src="https://www.youtube.com/embed/7N7hWeHEN8k?rel=0&start=0" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure>
<p>And, of course, there’s the <a href="https://codepen.io/tutsplus/full/WNmwBmB" target="_blank" rel="noopener">CodePen demo</a> for you to fork and play with:</p>
</div>
<div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0xh">
<p><iframe src="https://codepen.io/tutsplus/embed/WNmwBmB?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<div class="callout-block">
<span class="callout-icon callout-warn"></span>
<div class="callout-message">This demo will need your own API key (added in the JS panel) in order to work.</div>
</div>
</div>
<div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i079t">
<h2 id="toc-fcb3-inspiration"><span>Inspiration</span></h2>
<p><span>It’s worth noting that the project structure will be similar to </span><a href="https://webdesign.tutsplus.com/build-a-simple-weather-app-with-vanilla-javascript--cms-33893t" target="_blank" rel="noopener">another web app</a><span> we covered some years ago.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/build-a-simple-weather-app-with-vanilla-javascript--cms-33893"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33893/preview_image/paris.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33893/preview_image/paris.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33893/preview_image/paris.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Build a Simple Weather App With Vanilla JavaScript</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">30 Apr 2021</div>
</div>
</div>
</div>
</div></a></li></ul>
<p>There’s also a <a href="https://www.youtube.com/watch?v=zNieUNPoUVQ&t=1s" target="_blank" rel="noopener">video version</a> for this tutorial which you can watch if you prefer.</p>
</div>
<div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="iw9q">
<div class="embed-course-details__wrapper div-container">
<div class="div-container">
<div class="embed-course-summary__wrapper content-container"> <div class="free-course__label">FREE</div>
<div class="embed-course__duration">
<i class="fa fa-clock-o far fa-clock"></i>
<span>1.1 Hours</span>
</div>
</div>
<h2 id="i2qf">Build a Simple Weather App With JavaScript</h2>
</div>
<div class="embed-course__contents div-container" id="iabp"><div class="embed-course__description" id="iaeh"><p>In this short course, you’ll learn how to create a simple yet functional weather app using vanilla JavaScript and the Open Weather API.</p></div></div>
</div>
<div class="embed-course-video__wrapper content-container"> <figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=zNieUNPoUVQ&t=1">
<iframe src="https://www.youtube.com/embed/zNieUNPoUVQ?rel=0&start=1" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure> </div>
</div>
</div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ir6sj">
<h2 id="toc-7cuf-scaffolding-the-weather-app">
<span class="sectionnum">1. </span>Scaffolding the YouTube App</h2>
<p>Before we start creating our app, there are a few things that we have to address.</p>
<h3 id="toc-hwsj-find-a-weather-api">Grab a YouTube API key</h3>
<p>As a first and mandatory thing, we should get a YouTube API key that will give us access to the YouTube Data API. To do so, we should follow the instructions on <a href="https://developers.google.com/youtube/v3/getting-started" target="_blank" rel="noopener">this page</a> and set up a project in the Google Cloud Console with the <strong>YouTube Data API v3</strong> enabled. In my case, I’ve already done it while building the app. Now, i<span>t’s your turn to generate an API and include it in your forked demo.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/93502/image-upload/api.jpg" alt="this is the api you need" loading="lazy" width="870px" height="370px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/93502/image-upload/api.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/93502/image-upload/api.jpg" alt="this is the api you need" loading="lazy" width="650px" height="279px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/93502/image-upload/api.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93502/image-upload/api.jpg" alt="this is the api you need" loading="lazy" width="380px" height="168px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93502/image-upload/api.jpg 2x"></figure>
<p><span>For production environments, remember that it’s always wise to restrict the API requests to specific websites, IP addresses, etc.</span></p>
<h3 id="toc-vu4c-grab-a-lottie-animation"><span>Grab a Lottie Animation</span></h3>
<p>Optionally, to make our app as unique as possible, we’ll grab a <a href="https://lottiefiles.com/animations/confetti-Ljf8PgS2P4" target="_blank" rel="noopener">Lottie animation</a> from the LottieFiles library and play it for channels with 1M or more subscribers. </p>
<figure class="post_image"><a href="https://lottiefiles.com/animations/confetti-Ljf8PgS2P4"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/confetti.jpg" alt="Confetti Lottie animation" loading="lazy" width="870px" height="739px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/confetti.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/confetti.jpg" alt="Confetti Lottie animation" loading="lazy" width="650px" height="553px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/confetti.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/confetti.jpg" alt="Confetti Lottie animation" loading="lazy" width="380px" height="325px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/confetti.jpg 2x"></a></figure>
<p>First, we’ll generate an asset link for this animation and customize it as we wish.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg" alt="Generating an asset link for this animation" loading="lazy" width="870px" height="537px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg" alt="Generating an asset link for this animation" loading="lazy" width="650px" height="403px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg" alt="Generating an asset link for this animation" loading="lazy" width="380px" height="239px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/lottie_step2.jpg 2x"></figure>
<p><span>As things move quickly, at this point, the LottieFiles team suggests using the </span><a href="https://lottiefiles.com/tools/lottie-to-dotlottie" target="_blank" rel="noopener">dotLottie</a><span><a href="https://lottiefiles.com/tools/lottie-to-dotlottie" target="_blank" rel="noopener"> file format</a> instead of the traditional Lottie JSON to reduce the file size.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg" alt="Selecting the dotLottie file format for the animation" loading="lazy" width="870px" height="650px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg" alt="Selecting the dotLottie file format for the animation" loading="lazy" width="650px" height="487px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg" alt="Selecting the dotLottie file format for the animation" loading="lazy" width="380px" height="287px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/lottie_step3.jpg 2x"></figure>
<p>In our case, as we’re using a CodePen demo, we’ll import the required <code>.mjs</code> file like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DotLottiePlayer</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">"</span><span style="color: #90a959">https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr></tbody></table></div>
<p>Then, as we’ll see in an upcoming section, we’ll include the generated <code>dotlottie-player</code> component in the markup that represents the channel info.</p>
<p>Besides, if you need a refresher about how to include Adobe After Effects animations on a web page and Lottie Animations in general, consider the following tutorials:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/add-adobe-after-effects-animations-to-a-web-page--cms-35093"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35093/preview_image/lottie-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35093/preview_image/lottie-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35093/preview_image/lottie-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35093/preview_image/lottie-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35093/preview_image/lottie-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35093/preview_image/lottie-thumb.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add Adobe After Effects Animations to a Web Page</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">03 Dec 2020</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/coming-soon-page-with-lottie-animations--cms-36914"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36914/preview_image/coming-soon.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36914/preview_image/coming-soon.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36914/preview_image/coming-soon.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36914/preview_image/coming-soon.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36914/preview_image/coming-soon.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36914/preview_image/coming-soon.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Coming Soon Page With Lottie Animations</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">19 May 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33756/preview_image/scroll.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33756/preview_image/scroll.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33756/preview_image/scroll.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33756/preview_image/scroll.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33756/preview_image/scroll.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33756/preview_image/scroll.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">26 May 2021</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iiv3">
<h2 id="toc-7zd8-define-the-page-markup">
<span class="sectionnum">2.</span> Define the Page Markup</h2>
<figure class="post_image"></figure>
<figure class="post_image"></figure>
<p>Let’s now focus on the app development.</p>
<p>We’ll only define a section that will include a heading, a search form, and an empty <code class="inline">span</code> element.</p>
<p>We’ll set the <code>input</code> element as required and force it to wait 24 characters to avoid unnecessary AJAX requests. From my tests, I’ve seen that the length of a YouTube channel ID is 24, although you can update the <code>minlength</code> and <code>maxlength</code> attribute values if you notice something different.</p>
<p>The <code>span</code> element will appear with an appropriate message under certain conditions. For example, if we search for a YouTube channel ID that doesn’t exist or if, for some reason, the response is unsuccessful (i.e. 400 Bad Request, 404 Not Found, etc.). </p>
<p>Along the way, we’ll see the markup for the channel info that will be generated dynamically. </p>
<p>Here’s the initial page markup:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><section</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"top-banner"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"text"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h1></span>Simple App With the YouTube API<span style="color: #f4bf75"></h1></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"label"</span><span style="color: #f4bf75">></span>Use <span style="color: #f4bf75"><mark></span>UC8lxnUR_CzruT2KA6cb7p0Q<span style="color: #f4bf75"></mark></span> for testing which refers to the Envato Tuts+ channel ID<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><form></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"search"</span> <span style="color: #6a9fb5">minlength=</span><span style="color: #90a959">"24"</span> <span style="color: #6a9fb5">maxlength=</span><span style="color: #90a959">"24"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"Insert a valid YT channel ID"</span> <span style="color: #6a9fb5">autofocus</span> <span style="color: #6a9fb5">required</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"submit"</span><span style="color: #f4bf75">></span>SUBMIT<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"msg"</span><span style="color: #f4bf75">></span></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></form></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></section></span>
</pre></td>
</tr>
</tbody></table></div>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">The autofocus attribute of the search field won’t work unless you view the CodePen demo in <a href="https://cdpn.io/pen/debug/WNmwBmB" target="_blank" rel="noopener">debug mode</a>.</div>
</div>
<h3 id="toc-3yhq-asdasd">Find a YouTube Channel ID</h3>
<p>One quick way to find the ID of a YouTube channel is through the page source. First, navigate to the desired channel page, then view its source code and search for <code><span>https://www.youtube.com/channel/</span></code>. The channel ID will come after this base URL. </p>
<figure class="post_image"><a href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg" alt="Envato Tuts+ Channel ID" loading="lazy" width="870px" height="149px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg" alt="Envato Tuts+ Channel ID" loading="lazy" width="650px" height="116px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg" alt="Envato Tuts+ Channel ID" loading="lazy" width="380px" height="75px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/envato_tuts__channel_id.jpg 2x"></a>
<figcaption>Envato Tuts+ Channel ID</figcaption>
</figure>
<figure class="post_image"><a href="https://www.youtube.com/@TraversyMedia"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg" alt="Traversy Media Channel ID" loading="lazy" width="870px" height="132px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg" alt="Traversy Media Channel ID" loading="lazy" width="650px" height="103px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg" alt="Traversy Media Channel ID" loading="lazy" width="380px" height="67px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/traversymedia_channelid.jpg 2x"></a>
<figcaption>Traversy Media Channel ID</figcaption>
</figure>
<h2 id="toc-1w4k-set-the-main-styles">
<span class="sectionnum">3.</span> Set the Main Styles</h2>
<p>As this is a large tutorial, for the sake of simplicity, we’ll skip the starting styles and only concentrate on the main ones—you can view all of them by clicking the <strong>CSS</strong> tab of the demo.</p>
<h3 id="toc-bce7-form-styles">Form Styles</h3>
<p>On medium screens and above (>700px), the layout should look like this:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg" alt="The form layout on large screens" loading="lazy" width="870px" height="113px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg" alt="The form layout on large screens" loading="lazy" width="650px" height="89px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg" alt="The form layout on large screens" loading="lazy" width="380px" height="59px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/desktop_layout.jpg 2x"></figure>
<p>On smaller screens, the form elements will split into two lines:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg" alt="The form layout on mobile screens" loading="lazy" width="870px" height="215px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg" alt="The form layout on mobile screens" loading="lazy" width="650px" height="165px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg" alt="The form layout on mobile screens" loading="lazy" width="380px" height="103px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/mobile_layout.jpg 2x"></figure>
<p>Here are the associated styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/*CUSTOM VARIABLES HERE*/</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">relative</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">grid</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-gap</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1000px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">input</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">clamp</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">24px</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">2vw</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">32px</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">40px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding-bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-bottom</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #d0d0d0;background-color: #151515">currentColor</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">input</span><span style="color: #d0d0d0;background-color: #151515">::placeholder</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">opacity</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">button</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">bold</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15px</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--red</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transition</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">background</span> <span style="color: #90a959">0.3s</span> <span style="color: #d0d0d0;background-color: #151515">ease-in-out</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">button</span><span style="color: #d0d0d0;background-color: #151515">:hover</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--darkred</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">.msg</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-40" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>40</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-41" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>41</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-42" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>42</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-43" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>43</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">@media</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">700px</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-44" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>44</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-45" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>45</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0;background-color: #151515">fr</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-46" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>46</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-47" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>47</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-48" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>48</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75">.top-banner</span> <span style="color: #f4bf75">form</span> <span style="color: #f4bf75">.msg</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-49" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>49</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">static</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-50" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>50</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-51" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>51</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-7z6k-data-styles">Channel Styles</h3>
<p>As soon as we successfully get back from the server info for a channel, they will appear in a card layout like this:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="870px" height="422px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="650px" height="318px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="380px" height="190px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"></figure>
<p>The styles aren’t anything too complicated, so we won’t go into more detail at this point:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/*CUSTOM VARIABLES HERE*/</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">4%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">70px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--total-black</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">7px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">overflow</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">hidden</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.details</span> <span style="color: #f4bf75">img</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.details</span> <span style="color: #f4bf75">.title</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.details</span> <span style="color: #f4bf75">.description</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">max-width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">80%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span> <span style="color: #d0d0d0;background-color: #151515">auto</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.total-videos</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">relative</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">z-index</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.total-subscribers</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">relative</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">inline-grid</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-template-columns</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">grid-gap</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">bold</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">60px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-40" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>40</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--red</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-41" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>41</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-42" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>42</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-43" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>43</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.total-subscribers</span> <span style="color: #f4bf75">dotlottie-player</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-44" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>44</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-45" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>45</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-46" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>46</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-47" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>47</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">translate</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">-50%</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">-50%</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-48" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>48</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-49" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>49</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-50" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>50</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.total-subscribers</span> <span style="color: #f4bf75">.outer</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-51" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>51</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-52" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>52</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-53" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>53</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-54" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>54</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.card</span> <span style="color: #f4bf75">.total-subscribers</span> <span style="color: #f4bf75">svg</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-55" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>55</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">fill</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--red</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-56" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>56</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-57" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>57</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-58" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>58</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-sizing</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">content-box</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-59" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>59</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-h8b4-add-the-javascript">
<span class="sectionnum">4.</span> Add the JavaScript</h2>
<p>At this moment, we’re ready to build the core functionality of our YouTube app. Let’s do it!</p>
<h3 id="toc-mwkx-on-form-submission">On Form Submission</h3>
<p>Each time a user submits the form by pressing the <strong>Enter</strong> key or the <strong>Submit</strong> button, we’ll do two things:</p>
<ol>
<li>Stop the form from submitting, hence prevent reloading the page.</li>
<li>Grab the value that is contained in the search field.</li>
</ol>
<p>Here’s the starting code:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">topBanner</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.top-banner</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">form</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">topBanner</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">form</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">input</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">topBanner</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">input</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">form</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">submit</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">preventDefault</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">channelId</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">input</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-l4tt-perform-an-ajax-request">Perform an AJAX Request</h3>
<p>Before we go through the AJAX request, it’s important to read the docs and understand how to structure it. In our case, we want to get channel info, so we’ll focus on the <a href="https://developers.google.com/youtube/v3/docs/channels" target="_blank" rel="noopener">channel endpoint</a><span> and pass the following parameters:</span></p>
<ol>
<li>The <code>part</code> parameter with values the <code>snippet</code> and <code>statistics</code> names. </li>
<li>The API key. Again, you should use your own key.</li>
<li>The channel ID we’re interested to get info. In a previous section, we covered a way to find the ID of an existing channel.</li>
</ol>
<p><span>We can even experiment with the HTTP requests through the helper tool that is available on the right side of </span><a class="editor-rtfLink" href="https://developers.google.com/youtube/v3/docs/channels/list" target="_blank" rel="noopener"><span>this page</span></a><span>. </span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/test_request.jpg" alt="Experiment with a test request" loading="lazy" width="870px" height="546px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/test_request.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/test_request.jpg" alt="Experiment with a test request" loading="lazy" width="650px" height="410px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/test_request.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/test_request.jpg" alt="Experiment with a test request" loading="lazy" width="380px" height="243px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/test_request.jpg 2x"></figure>
<p><span>With all the above in mind, </span><span>our request URL should look something like this:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">BASE_URL</span> <span style="color: #d0d0d0">=</span><span style="color: #90a959">"</span><span style="color: #90a959">https://www.googleapis.com/youtube/v3/channels?part=statistics,snippet</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">API_KEY</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">AIzaSyAHupLf37J-vEziyQ-pItfoaLS5XUqdVq8</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">channelID</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">input</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">url</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">BASE_URL</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">&id=</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">channelId</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">&key=</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">API_KEY</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
</tbody></table></div>
<p><span>We’ll use the </span><a class="editor-rtfLink" href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener"><span>Fetch API</span></a><span> to perform the AJAX request—I assume you’re familiar with this technique. There’s also a <a href="https://webdesign.tutsplus.com/series/ajax-for-front-end-designers--cms-967" target="_blank" rel="noopener">series</a> if you need a refresher. </span><span>As discussed previously, we’ll add proper error handling for unsuccessful cases. For example, if we search for a non-existing channel or the status request hasn’t succeeded.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/error.jpg" alt="An example of error handling" loading="lazy" width="870px" height="263px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/error.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/error.jpg" alt="An example of error handling" loading="lazy" width="650px" height="200px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/error.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/error.jpg" alt="An example of error handling" loading="lazy" width="380px" height="123px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/error.jpg 2x"></figure>
<p>So, our AJAX request would look something like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">form</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">submit</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">fetchYTStatistics</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">channelId</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">then</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #aa759f">typeof</span> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">items</span> <span style="color: #d0d0d0">!==</span> <span style="color: #90a959">"</span><span style="color: #90a959">undefined</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">createCard</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">else</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">msg</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">"</span><span style="color: #90a959">Please search for a valid YT channel ID 😩</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">})</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #aa759f">catch</span><span style="color: #d0d0d0">((</span><span style="color: #d0d0d0;background-color: #151515">error</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">=></span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">msg</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">error</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">async</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">fetchYTStatistics</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">channelId</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">url</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">BASE_URL</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">&id=</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">channelId</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">&key=</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">API_KEY</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">response</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">await</span> <span style="color: #d0d0d0;background-color: #151515">fetch</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">url</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0">!</span><span style="color: #d0d0d0;background-color: #151515">response</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">ok</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">Promise</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">reject</span><span style="color: #d0d0d0">(</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">`Something isn't working as expected. Error: </span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">response</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">status</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">`</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">data</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">await</span> <span style="color: #d0d0d0;background-color: #151515">response</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">json</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Here’s an example of the response data:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/response.jpg" alt="An example of the response data" loading="lazy" width="870px" height="500px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/response.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/response.jpg" alt="An example of the response data" loading="lazy" width="650px" height="376px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/response.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/response.jpg" alt="An example of the response data" loading="lazy" width="380px" height="223px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/response.jpg 2x"></figure>
<h3 id="toc-scp9-build-the-list-item-component">Build the Card</h3>
<p>With the AJAX request in place, each time we type a channel ID in the search field, the API will return channel data if they are available. We’ll then collect only the required data and attach it to the page as a card component.</p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="870px" height="422px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="650px" height="318px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/channel.jpg" alt="The channel info" loading="lazy" width="380px" height="190px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/channel.jpg 2x"></p>
<p>Two things to note here:</p>
<ul>
<li>The Lottie animation will play only if the channel subscribers are at least 1M.</li>
<li>We’ll use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat" target="_blank" rel="noopener">NumberFormat API</a> to format the numbers related to the channel videos and subscribers. </li>
<li>The external links won’t work unless you view the CodePen demo in <a href="https://cdpn.io/pen/debug/ZEPGNNX/8aaccfa7964eb60af51a453688abadc5" target="_blank" rel="noopener">debug mode</a>.</li>
</ul>
<p>Here’s the code responsible for this job:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">createCard</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">allData</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">data</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">items</span><span style="color: #d0d0d0">[</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">];</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">customUrl</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">title</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">description</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">thumbnails</span> <span style="color: #d0d0d0">}</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">allData</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">snippet</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0">{</span> <span style="color: #6a9fb5">default</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">thumbnail</span> <span style="color: #d0d0d0">}</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">thumbnails</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">videoCount</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">subscriberCount</span> <span style="color: #d0d0d0">}</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">allData</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">statistics</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">div</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">createElement</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">div</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">classList</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">add</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">card</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">container</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">markup</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`
</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <div class="details">
</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <img width="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">thumbnail</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">" height="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">thumbnail</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">" src="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">thumbnail</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">url</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">" alt="</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">title</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">">
</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <div class="title">
</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <a href="https://www.youtube.com/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">customUrl</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">" target="_blank"></span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">title</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"></a>
</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </div>
</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <p class="description"></span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">description</span><span style="color: #d0d0d0">}</span><span style="color: #90a959"></p>
</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </div>
</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <div class="total-videos">
</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <a href="https://www.youtube.com/</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">customUrl</span><span style="color: #d0d0d0">}</span><span style="color: #90a959">/videos" target="_blank">Browse</a>
</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <span class="count"></span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">formatNumber</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">videoCount</span><span style="color: #d0d0d0">)}</span><span style="color: #90a959"></span> videos
</span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </div>
</span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <div class="total-subscribers">
</span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </span><span style="color: #d0d0d0">${</span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">subscriberCount</span> <span style="color: #d0d0d0">>=</span> <span style="color: #90a959">1000000</span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">?</span> <span style="color: #90a959">`<dotlottie-player src="https://lottie.host/5fa38a1c-c8ba-4c3d-83b5-1a99b8796da3/jJFC2WMsxa.lottie" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>`</span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">:</span> <span style="color: #90a959">""</span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span><span style="color: #90a959">
</span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <span class="outer">
</span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <span class="count"></span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">formatNumber</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">subscriberCount</span><span style="color: #d0d0d0">)}</span><span style="color: #90a959"></span>
</span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> Subscribers
</span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </span>
</span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <svg xmlns="https://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
</span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> <path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z" />
</span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </svg>
</span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> </div>
</span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre><span style="color: #90a959"> `</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">markup</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">body</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">appendChild</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">div</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-40" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>40</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-41" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>41</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">formatNumber</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">number</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-42" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>42</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Intl</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">NumberFormat</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">en</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-43" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>43</pre></td>
<td class="rouge-code"><pre> <span style="color: #6a9fb5">notation</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"</span><span style="color: #90a959">compact</span><span style="color: #90a959">"</span>
</pre></td>
</tr>
<tr id="line-44" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>44</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}).</span><span style="color: #d0d0d0;background-color: #151515">format</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">number</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-45" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>45</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The generated markup as it’s rendered in the browser console:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/93502/image-upload/card_markup.jpg" alt="The card markup" loading="lazy" width="870px" height="546px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/93502/image-upload/card_markup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/93502/image-upload/card_markup.jpg" alt="The card markup" loading="lazy" width="650px" height="410px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/93502/image-upload/card_markup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/93502/image-upload/card_markup.jpg" alt="The card markup" loading="lazy" width="380px" height="243px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/93502/image-upload/card_markup.jpg 2x"></figure>
<h3 id="toc-eoyf-reset-things">Reset Things</h3>
<p><span>Lastly, after the AJAX request, we’ll do the following:</span></p>
<ul>
<li><span>Remove the <code>.card</code> element from the page.</span></li>
<li>
<span>Clear the content of the </span><code class="inline">.msg</code> <span>element.</span>
</li>
<li><span>Clear the value of the search field and give focus to that field.</span></li>
</ul>
<p><span>Here’s the related code:</span></p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">...</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.card</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">))</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.card</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">remove</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">msg</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">textContent</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">form</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">reset</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">input</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">focus</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-lle1-your-weather-app-is-ready">Your YouTube App Is Ready!</h2>
<p>Done, folks! This really was quite a long journey, so thanks for following along! I hope you enjoyed the end result and that helped you learn some new things.</p>
<p>Once again, don’t forget to put your own key for live app testing!</p>
<p>As a reminder, let’s look again at the app:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/WNmwBmB?default-tab=result" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<p>As always, thanks a lot for reading!</p>
<h3 id="toc-fuio-next-steps">Next Steps</h3>
<p>There are so many things that you can do to extend the functionality of this YouTube app. Here are some thoughts:</p>
<ul>
<li>Create another section to show the latest channel videos.</li>
<li><span>Instead of showing just a channel each time, modify the code to show multiple channel info simultaneously in a grid format, as we did with the weather app.</span></li>
</ul>
<p><span>If there’s anything else that you might want to see as an app extension, let us know on <a href="https://twitter.com/tutsplus" target="_blank" rel="noopener">X</a> or in the <a href="https://codepen.io/tutsplus/details/WNmwBmB" target="_blank" rel="noopener">demo comments</a>!</span></p>
<h2 id="toc-5ygb-discover-more-javascript-tutorials-and-resources">Discover More JavaScript Tutorials and Resources</h2>
<p>Interested in practicing modern JavaScript through fun hands-on projects? If so, check out these JavaScript tutorials: </p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/build-a-simple-weather-app-with-vanilla-javascript--cms-33893"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33893/preview_image/paris.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33893/preview_image/paris.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33893/preview_image/paris.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33893/preview_image/paris.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Build a Simple Weather App With Vanilla JavaScript</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">30 Apr 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/to-do-app-with-vanilla-javascript--cms-35258"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35258/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35258/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35258/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35258/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35258/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35258/preview_image/pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a TODO App With Vanilla JavaScript (and Local Storage)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">24 Nov 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/building-an-admin-dashboard-layout-with-css-and-a-touch-of-javascript--cms-33964"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33964/preview_image/admin-dash-pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Building an Admin Dashboard Layout With CSS (and a Touch of JavaScript)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">29 Aug 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/simple-full-screen-slideshow-with-vanilla-javascript--cms-34624"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/34624/preview_image/thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/34624/preview_image/thumb.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/34624/preview_image/thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/34624/preview_image/thumb.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/34624/preview_image/thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/34624/preview_image/thumb.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">17 Mar 2020</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-custom-google-map-with-stylish-svg-markers--cms-36699"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36699/preview_image/map.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36699/preview_image/map.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36699/preview_image/map.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36699/preview_image/map.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36699/preview_image/map.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36699/preview_image/map.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Custom Google Map With Stylish SVG Markers</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">19 Sep 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/draggable-javascript-image-gallery-with-gsap--cms-37591"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/37591/preview_image/draggable-gallery.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Draggable Image Gallery and a Custom Lightbox With GSAP</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">16 Sep 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-shifting-underline-hover-effect-with-css-and-javascript--cms-28510"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/28510/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/28510/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/28510/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/28510/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/28510/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/28510/preview_image/pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Build a Shifting Underline Hover Effect With CSS and JavaScript</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">22 Jun 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/build-a-navigation-menu-with-an-animated-active-indicator--cms-106831"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/posts/106831/preview_image/sm1.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/posts/106831/preview_image/sm1.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/posts/106831/preview_image/sm1.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/posts/106831/preview_image/sm1.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/106831/preview_image/sm1.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/106831/preview_image/sm1.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Build a Navigation Menu With an Animated Active Indicator (JavaScript)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/profiles/19309/profileImage/george-web-avatar-400x400.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">George Martsoukos</div>
<div class="roundup-block__published-date">02 May 2023</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/93502/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93502/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93502/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/93502/a2t.img" width="1" /></div>
2024-01-09 13:40:00 UTC
2024-01-09 13:40:00 UTC
George Martsoukos
tag:code.tutsplus.com,2005:PostPresenter/cms-35373
2020-06-22T11:08:19+00:00
How to Redirect a Page or URL in WordPress
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#inog{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iqog"><p>In this post, I’ll show you how to redirect a page or URL in WordPress. You’ll learn how to set up automatic redirects, manual redirects, and wildcard redirects in WordPress.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i84v">
<h2 id="toc-d8uq-what-is-a-wordpress-redirect">What is a WordPress Redirect? </h2>
<p>Ever clicked on a link expecting to land on a particular page, only to find yourself whisked away to a different one? That, my friend, is the magic of a WordPress redirect in action. It's like a digital sleight of hand where one URL deftly hands off to another. Now, why does this matter to you? </p>
<p>When you manage a website, pages sometimes get deleted, posts get updated, and whole websites undergo revamps. This is where WordPress redirects play a vital role. Think of them as the friendly traffic cops of the web, guiding visitors to the right destination when the original one is no longer available or has moved.</p>
<p>Redirects in WordPress are particularly important for maintaining a smooth user experience and preserving SEO rankings. Imagine you’ve put in loads of effort to rank a specific page. Without a redirect, if that page moves, all your hard-earned SEO juice goes down the drain, and visitors hit a frustrating dead end.</p>
<p>There are various types of page redirects in WordPress, but the most common ones are 301 and 302. A 301 redirect is like saying, "Hey, this page has moved permanently. Update your records, please!" It's a firm, final move, signaling search engines to transfer the old page's SEO value to the new one.</p>
<p>On the flip side, a 302 redirect is more of a temporary detour sign, hinting, "We're just making some changes here. The original page will be back soon."</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="imti">
<h2 id="toc-xv3p-why-redirect-pages-or-urls">Why Redirect Pages or URLs in WordPress?</h2>
<p>There are many times when you might need to redirect a post, page, or URL in WordPress. That’s when a W<span>ordPress redirect page comes in useful. </span></p>
<p>Maybe you’ve changed the slug for a post or page. Maybe you’ve amended your permalink settings. Or maybe you’ve written a new post and want to redirect an old post to that. </p>
<p>In all of these cases, you’ll need to learn <span>how to redirect a post in WordPress</span>. This tells browsers to go to the new URL instead of the old one.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9jk">
<h2 id="toc-79i3-why not-use-redirects"><strong>Why <em>Not</em> Use Redirects in WordPress?</strong></h2>
<p>Setting up redirects in WordPress isn’t ideal. It slows things down for the user because the browser will go to the first URL, get the redirect message, and then go to the second URL. And there’s a risk that you’ll set up the redirect wrong or simply forget to do it after changing a URL. Not only that, but links coming through a redirected page aren’t worth as much for SEO -- Google just doesn’t value them as highly.</p>
<p>So it’s a good idea to avoid changing your URLs altogether. To minimize changing URLs, make sure you optimize them right from the start:</p>
<ul>
<li>Configure your permalink settings to use pretty permalinks when you first set up your site and before you add any posts or pages.</li>
<li>Configure the slug for each post or page before you publish it. Make sure it’s suitable both for search engine optimization (SEO) and for user experience (UX).</li>
<li>But if you haven’t already done this, and you need to redirect your URLs in WordPress, how do you do it?</li>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i7wth">
<h2 id="toc-e0lq-how-to-set-up-page-and-url-redirects-in-wordpress">How to Set Up Page and URL Redirects in WordPress</h2>
<p>There are a few different kinds of redirects that you might want to set up for WordPress. The kinds you’ll most likely be using are:</p>
<ul>
<li>automated redirects</li>
<li>manual redirects</li>
<li>wildcard redirects</li>
</ul>
<p>Let’s take a look at each of these WordPress redirects as they apply to directing a WordPress page or URL.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idp3d">
<h2 id="toc-k8ei-setting-up-automated-redirects">Setting Up Automated Redirects in WordPress</h2>
<p>To set up a W<span>ordPress redirect page</span>, you’ll need to install a plugin. In this guide, I’m going to show you how to do it with the <a href="https://wordpress.org/plugins/redirection/">Redirection</a> plugin. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg" alt="WordPress Redirect Tutorial Redirection plugin" loading="lazy" width="870px" height="884px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg" alt="WordPress Redirect Tutorial Redirection plugin" loading="lazy" width="650px" height="660px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg" alt="WordPress Redirect Tutorial Redirection plugin" loading="lazy" width="380px" height="386px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/35373/image-upload/Redirection_Wordpress.jpg 2x"></figure>
<p>When you first install the WordPress page redirect plugin, it gives you the option to automatically track changes to URLs and to set up redirects. The link redirect maker plugin will also check the revisions to your existing posts and pages and set up redirects from old slugs you might have used for them.</p>
<p>In the screenshot below, it’s picked up on a change to an existing post’s slug and added a redirect from the old slug to the new one.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg" alt="Link Redirect Maker Plugin Tutorial automated slug change redirect" loading="lazy" width="870px" height="137px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg" alt="Link Redirect Maker Plugin Tutorial automated slug change redirect" loading="lazy" width="650px" height="107px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg" alt="Link Redirect Maker Plugin Tutorial automated slug change redirect" loading="lazy" width="380px" height="70px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/35373/image/automated%20slug%20change%20redirect.jpg 2x"></figure>
<p>What if I make any changes to my slugs or URLs after activating? The link redirect maker plugin will track those and automatically set up the redirect to the new page. Below, you can see the WordPress page redirect plugin screen after making more slug changes.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg" alt="Link Redirect Maker Plugin Tutorial redirection - multiple slugs" loading="lazy" width="870px" height="259px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg" alt="Link Redirect Maker Plugin Tutorial redirection - multiple slugs" loading="lazy" width="650px" height="197px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg" alt="Link Redirect Maker Plugin Tutorial redirection - multiple slugs" loading="lazy" width="380px" height="121px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/35373/image/redirection%20-%20multiple%20slugs.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ip8ze">
<h2 id="toc-in2y-setting-up-manual-redirects">Setting Up Manual Redirects in WordPress</h2>
<p>Sometimes, the WordPress redirect plugin won’t pick up on the page redirect you need. Maybe you want your WordPress site to redirect one post to another or you want to redirect a URL on your domain to a different domain, but the WordPress<span> redirect plugin won’t work for that</span>.</p>
<p>In this case, you’ll need to set up a manual redirect in WordPress without a plugin.</p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg" alt="WordPress Redirect Tutorial add new redirect" loading="lazy" width="870px" height="155px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg" alt="WordPress Redirect Tutorial add new redirect" loading="lazy" width="650px" height="120px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg" alt="WordPress Redirect Tutorial add new redirect" loading="lazy" width="380px" height="77px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/35373/image/add%20new%20redirect.jpg 2x"></p>
<ol>
<li>Go to <strong>Tools > Redirection</strong> and scroll down to the <strong>Add new redirection</strong> section.</li>
<li>In the <strong>Source URL</strong> field, type or paste in the URL you want to redirect from.</li>
<li>In the <strong>Target URL</strong> field, type or paste in the URL you want to redirect to.</li>
<li>In the <strong>Group</strong> field, either leave it as <strong>Redirections</strong> (the default) or select <strong>Modified posts</strong> if you’re directing from an old post to a newer version. This will tell browsers what kind of redirect it is.</li>
<li>Finally, click the <strong>Add Redirect</strong> button, and your manual redirect will be added to the list of redirects. You've now completed all that you need to redirect a page in WordPress.</li>
</ol>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i3sn">
<h2 id="toc-4b2z-setting-up-wildcard-redirects"><strong>Setting Up Wildcard Redirects</strong></h2>
<p>Use a wildcard redirect when you want to redirect a set of URLs that share certain elements. For example, if you change your permalink structure, a wildcard redirect will send anyone using a link from your old structure to the same link using your new structure.</p>
<p>If you’ve changed your permalink structure for posts from <strong>/blog/post-name</strong> to <strong>/category/post-name</strong>, for instance, you’ll need to use a wildcard redirect to ensure anyone using the old links is redirected to the new URL.</p>
<p>Wildcard redirects use something called Regex, which lets you create advanced redirects. You’ll need to enable Regex functions first to set up a wildcard WordPress redirect. To do this, complete the following process: </p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg" alt="Setting up a wildcard redirect with the Redirection plugin" loading="lazy" width="870px" height="150px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg" alt="Setting up a wildcard redirect with the Redirection plugin" loading="lazy" width="650px" height="116px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg" alt="Setting up a wildcard redirect with the Redirection plugin" loading="lazy" width="380px" height="75px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/227/posts/35373/image/Setting%20up%20a%20wildcard%20redirect%20with%20the%20Redirection%20plugin.jpg 2x"></p>
<ol>
<li>Go to <strong>Tools > Redirection</strong> and scroll to the <strong>Add new redirection</strong> section of the screen.</li>
<li>In the <strong>Source URL</strong> field, type the old path to categories, with a wildcard. It needs to take the form <code class="inline">/oldslug/(.*)$</code>.</li>
<li>The entry for <strong>Target URL</strong> needs to take the source <code class="inline">/newslug/$1</code>.</li>
<li>Then click the <strong>Add Redirect</strong> button.</li>
</ol>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="inog"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idh7">
<h2 id="toc-fuxo-watch-the-video">Watch the Video and Learn How to Redirect in WordPress </h2>
<p>Wondering how to redirect a URL in WordPress? Knowing <span>how to redirect a post in WordPress is a good tool to have. </span>Here’s a quick video to learn more (and don’t forget to subscribe to the <a href="https://www.youtube.com/@envatotuts" target="_blank" rel="noopener">Tuts+ YouTube channel</a> for more daily videos!): </p>
<figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=5bbjIdlDbLM&t=0">
<iframe src="https://www.youtube.com/embed/5bbjIdlDbLM?rel=0&start=0&origin=https://webdesign.tutsplus.com" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure>
</div></div></div><div data-content-block-type="Wysi" id="iooh" class="content-block-wysi content-block">
<h2 id="toc-feqb-the-best-wordpress-themes-and-plugins-on-envato-market">The Best WordPress Themes and Plugins on Envato Market</h2>
<p>Explore thousands of the <a href="https://themeforest.net/popular_item/by_category?category=wordpress" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">best WordPress themes ever created on ThemeForest</a> and <a href="https://codecanyon.net/popular_item/by_category?category=wordpress" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">leading WordPress plugins on CodeCanyon</a>. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors. </p>
<h2 id="toc-ws9g-get-more-wordpress-resources">Get More WordPress Resources</h2>
<p>Now you know how to redirect a URL in WordPress. Here are a few of the best-selling and up-and-coming WordPress themes and plugins available for 2022.</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/15-best-wordpress-portfolio-themes-for-creatives--cms-26277"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/26277/preview_image/portfolio_wordpress_themes_for_creatives.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">29 Best Portfolio WordPress Themes for Creatives</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">19 Jan 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/8-best-wordpress-slider-carousel-plugins-of-2017--cms-28592"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/28592/preview_image/slider.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/28592/preview_image/slider.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/28592/preview_image/slider.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/28592/preview_image/slider.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/28592/preview_image/slider.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/28592/preview_image/slider.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">21 Best WordPress Slider & Carousel Plugins of 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">01 Jun 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/20-best-wordpress-calendar-plugins-and-widgets--cms-25906"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/25906/preview_image/calendar-c.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/25906/preview_image/calendar-c.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/25906/preview_image/calendar-c.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/25906/preview_image/calendar-c.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/25906/preview_image/calendar-c.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/25906/preview_image/calendar-c.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">29 Best WordPress Calendar Plugins and Widgets (With 4 Free Plugins)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">23 Jul 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-responsive-wordpress-themes--cms-29973"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29973/preview_image/wordpress_roundup.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">31+ Best Responsive WordPress Themes (For Sites in 2024)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">07 Sep 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/20-best-visual-composer-addons-extensions-of-2017--cms-28733"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/28733/preview_image/online-shopping-website-P6NA9XP.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">30 Best WPBakery Page Builder (Visual Composer) Addons and Extensions of 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">25 Mar 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-wordpress-themes-for-consultants-coaches--cms-29404"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29404/preview_image/consultant.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29404/preview_image/consultant.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29404/preview_image/consultant.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29404/preview_image/consultant.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29404/preview_image/consultant.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29404/preview_image/consultant.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">35 Best Coaching & Consulting WordPress Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">23 Jun 2023</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h2 id="toc-759p-conclusion"><strong>Redirect in WordPress the Proper Way</strong></h2>
<p>If you change the URLs in your WordPress site or create a new post to replace an old one, you’ll need to set up a redirect. Depending on the changes you’ve made, you might use an automatic redirect, manual redirect, or wildcard redirect. Hopefully, this guide has helped you to learn how to set up redirects in WordPress for different circumstances.</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/35373/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/35373/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/35373/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/35373/a2t.img" width="1" /></div>
2024-01-04 09:29:00 UTC
2024-01-04 09:29:00 UTC
Rachel McCollin
tag:code.tutsplus.com,2005:PostPresenter/cms-37899
2021-08-15T08:11:20+00:00
WordPress Troubleshooting: Error Establishing a Database Connection
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="ia56x"><p><span>In this post, we’ll quickly review the common causes of the WordPress error establishing a database connection. Then we’ll provide you with a step-by-step guide on how to troubleshoot and repair it. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ioek"><p><span>WordPress errors are always frustrating when they arise. The good news with this particular one is this: The </span><strong>Error establishing a database connection</strong><span> tells us where the issue occurred. This will significantly cut down on how much troubleshooting you’ll have to do to fix it.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i2pi"><h2 id="toc-whz8-why-wont-your-wordpress-connect-to-the-database"><span>Why Won’t WordPress Connect to the Database?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i281">
<p><span>When you encounter an error code that reads “</span><strong>Error establishing a database connection</strong><span>”, it means your website can’t fetch the data from your website. Since WordPress uses a database to store all of your website content and data, it needs to connect to it in order to run the site. </span></p>
<p><span>Fortunately, you’re likely to catch this error before it affects your website visitors. So long as you have caching installed, your website should continue to display your web pages without issue until you modify something. </span></p>
<p><span>However, you will lose access to the backend WordPress dashboard until this error is resolved. </span></p>
<p><span>So, what causes it? There are a number of reasons why you’ll see this error:</span></p>
<ul>
<li><span>Your database login details are wrong.</span></li>
<li><span>The website URL is incorrect.</span></li>
<li><span>The database tables have been corrupted. </span></li>
<li><span>WordPress files have been corrupted.</span></li>
<li><span>The server is down or overloaded. </span></li>
<li><span>Your site has been hacked.</span></li>
</ul>
<p><span>This kind of error — regardless of the source of the problem — needs to be fixed immediately. And not just because you won’t have access to your site. </span></p>
<p><span>When your site inevitably goes down and visitors see the message “</span><strong>Error establishing a database connection</strong><span>”, it’s going to scare a lot of them away. It’ll cause others to question the security and/or legitimacy of your site. </span></p>
<p><span>To protect your brand integrity as well as your website’s traffic and sales, fix the error as soon as you spot it.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz12"><h2 id="toc-zg7r-how-to-fix-the-wordpress-error-establishing-a-database-connection"><span>How to Fix the WordPress Error Establishing a Database Connection</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilnsu">
<p><span>In order to fix this WordPress error, you’ll need access to your server and files. It’s okay if you’ve never made modifications to your files or database before. We’ll show you where to go to implement each of these solutions.</span></p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">
<span>We’ll be using SiteGround </span><a href="https://webdesign.tutsplus.com/web-hosting-vs-wordpress-hosting--cms-35215a"><span>web hosting</span></a><span> to demonstrate these repairs. While your hosting dashboard may look a little different, the basic steps will be more or less the same.</span>
</div>
</div>
</div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="idxl"><ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow" start="0">
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-ds9b-solution-1-update-your-database-login-details"><span class="visual-toc__heading-title content-container">Solution #1: Update Your Database Login Details</span></a></li>
<li class="toc-item-title"><a href="#toc-5jhh-solution-2-fix-the-site-url"><span class="visual-toc__heading-title content-container">Solution #2: Fix the Site URL</span></a></li>
<li class="toc-item-title"><a href="#toc-iqea-solution-3-activate-repair-mode"><span class="visual-toc__heading-title content-container">Solution #3: Activate Repair Mode</span></a></li>
</div>
<div class="visual-toc-column div-container">
<li class="toc-item-title" id="iwuci"><a href="#toc-y6hl-solution-4-check-for-and-replace-corrupted-files"><span class="visual-toc__heading-title content-container">Solution #4: Check For and Replace Corrupted Files</span></a></li>
<li class="toc-item-title" id="ipnxi"><a href="#toc-7keo-solution-5-restore-your-last-backup"><span class="visual-toc__heading-title content-container">Solution #5: Restore Your Last Backup</span></a></li>
<li class="toc-item-title"><a href="#toc-rquk-solution-6-contact-your-web-host"><span class="visual-toc__heading-title content-container">Solution #6: Contact Your Web Host</span></a></li>
</div>
</ul></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itj6w"><h3 id="toc-ds9b-solution-1-update-your-database-login-details"><span>Solution #1: Update Your Database Login Details</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijgzi">
<p><span>In order for your WordPress site to connect to the MySQL database, WordPress needs the following information:</span></p>
<ul>
<li><span>database name</span></li>
<li><span>database username</span></li>
<li><span>database password</span></li>
<li><span>database host name</span></li>
</ul>
<p><span>WordPress stores these login details in the </span><strong>wp-config.php</strong><span> file, which is located in the document root of your website. You can edit the </span><strong>wp-config.php</strong><span> by connecting to your site with an FTP client or you can use cPanel if it is supported by your host.</span></p>
<p><span>In </span><a href="https://www.siteground.com/"><span>SiteGround</span></a><span> (or whatever your hosting provider is), go to </span><strong>Site Tools</strong><span> > </span><strong>Site </strong><span>> </span><strong>MySQL</strong><span> first. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="in5rh">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg" alt="In SiteGround, go to the MySQL Manager to locate your database's name and username." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg" alt="In SiteGround, go to the MySQL Manager to locate your database's name and username." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg" alt="In SiteGround, go to the MySQL Manager to locate your database's name and username." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_mysql_db_details.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ix4j">
<p><span>Your database name is under </span><strong>Name</strong><span>. Click the </span><strong># User</strong><span> link to reveal the username. Note these down somewhere.</span></p>
<p><span>Go to </span><strong>File Manager</strong><span> (or </span><strong>FTP Accounts</strong><span>, if you have one) next. </span></p>
<p><span>Click on </span><strong>public_html</strong><span> to view the documents stored at your website’s root. Scroll down the list until you find </span><strong>wp-config.php</strong><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijmrt">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg" alt="In your web hosting File Manager (or FTP), look for a file called wp-config.php to fix the WordPress error establishing a database connection" loading="lazy" width="870px" height="452px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg" alt="In your web hosting File Manager (or FTP), look for a file called wp-config.php to fix the WordPress error establishing a database connection" loading="lazy" width="650px" height="340px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg" alt="In your web hosting File Manager (or FTP), look for a file called wp-config.php to fix the WordPress error establishing a database connection" loading="lazy" width="380px" height="203px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_wp_config.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i03vp"><p><span>Click the </span><strong>Edit </strong><span>button or double-click it to open the file. Your login details will look like this: </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idrk1">
<div class="rouge-syntax-highlight"><table class="rouge-line-table php"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/** The name of the database for WordPress */</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">define</span><span style="color: #d0d0d0">(</span> <span style="color: #90a959">'DB_NAME'</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">'fakedbname'</span> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/** MySQL database username */</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">define</span><span style="color: #d0d0d0">(</span> <span style="color: #90a959">'DB_USER'</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">'fakeusername'</span> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/** MySQL database password */</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">define</span><span style="color: #d0d0d0">(</span> <span style="color: #90a959">'DB_PASSWORD'</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">'fakepasswordpassword'</span> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/** MySQL hostname */</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">define</span><span style="color: #d0d0d0">(</span> <span style="color: #90a959">'DB_HOST'</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">'localhost'</span> <span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icdc">
<p><span>Start by comparing the database name and username to the ones you just copied from MySQL. If they’re wrong, that’s likely why WordPress can’t connect to the database. </span></p>
<div class="callout-block">
<span class="callout-icon callout-warn"></span>
<div class="callout-message"><span>Before you make any changes to this file, save a backup of your website. Even if the website is down due to the connection error, the issue could be exacerbated if the error isn’t properly fixed. </span></div>
</div>
<p><span>So it’ll be useful being able to roll back to this point before you’ve altered anything. </span><a href="https://webdesign.tutsplus.com/how-to-backup-your-wordpress-site--cms-34634t"><strong>Here’s what you’ll do to back up your WordPress site.</strong></a></p>
<p><span>Back to the wp-config file. If the first two values are incorrect, edit them and then click </span><strong>Save</strong><span>. </span></p>
<p><span>Return to your website to see if this fixed the issue. If it did not, the password could be the issue. </span></p>
<p><span>Instead of trying to track down the encrypted password, go back to the </span><strong>MySQL Manager</strong><span> and click on the </span><strong>Users </strong><span>tab at the top. Click on the vertical ellipsis on the far right and select </span><strong>Change Password</strong><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ifxq">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg" alt="In your MySQL Manager, go to the Users tab. Select Change Password to set a new one." loading="lazy" width="870px" height="356px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg" alt="In your MySQL Manager, go to the Users tab. Select Change Password to set a new one." loading="lazy" width="650px" height="269px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg" alt="In your MySQL Manager, go to the Users tab. Select Change Password to set a new one." loading="lazy" width="380px" height="162px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_edit_user_pw.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6tx">
<p><span>With your password updated, you can return to your </span><strong>File Manager</strong><span> or </span><strong>FTP </strong><span>and update the password in the wp-config file to match. </span></p>
<p><span>Save your changes. Then return to your WordPress site once more to see if this fixed the issue.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iomh5"><h3 id="toc-5jhh-solution-2-fix-the-site-url"><span>Solution #2: Fix the Site URL</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ip60c">
<p><span>If the issue remains unresolved, the next thing to check in the database is your site URL. </span></p>
<p><span>For this one, go to </span><strong>MySQL</strong><span> > </span><strong>PHPADMIN </strong><span>and click the </span><strong>ACCESS PHPMYADMIN</strong><span> button.</span></p>
<p><span>Click on the </span><strong>Databases </strong><span>tab at the top. If you have more than one database, select the primary one for your site. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iujb5">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg" alt="From the PHPMYADMIN screen, locate your database name and click on it to view the tables." loading="lazy" width="870px" height="354px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg" alt="From the PHPMYADMIN screen, locate your database name and click on it to view the tables." loading="lazy" width="650px" height="268px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg" alt="From the PHPMYADMIN screen, locate your database name and click on it to view the tables." loading="lazy" width="380px" height="161px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_review_phpmyadmin.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="idzko">
<p><span>The table you’re looking for is commonly called </span><strong>wp_options</strong><span>. However, yours might have a different prefix. Use the search bar at the top of the page to find tables with the word “options” in it to find yours. </span></p>
<p><span>Select the </span><strong>_options</strong><span> file. Click to open it. At the top of the list of details, you should see </span><strong>siteurl</strong><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iln6q">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg" alt="In PHPMYADMIN, your database will list all of the table details in it. Look for the one called siteurl." loading="lazy" width="870px" height="226px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg" alt="In PHPMYADMIN, your database will list all of the table details in it. Look for the one called siteurl." loading="lazy" width="650px" height="173px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg" alt="In PHPMYADMIN, your database will list all of the table details in it. Look for the one called siteurl." loading="lazy" width="380px" height="107px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_phpmyadmin_site_url.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ius9f">
<p><span>Confirm that the </span><strong>option_value</strong><span> matches your domain name. If it doesn’t, click the </span><strong>Edit </strong><span>button on the left to change it. </span></p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">
<strong>Reminder:</strong><span> If you haven’t made a backup of your site yet, do so now before editing this table. </span>
</div>
</div>
<p><span>When you’re done, save your changes. Then return to your website to see if the error is gone. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iii8m"><h3 id="toc-iqea-solution-3-activate-repair-mode"><span>Solution #3: Activate Repair Mode</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izibt">
<p><span>In some cases, the database has been corrupted. This can happen if you add and remove a lot of themes or plugins and the data doesn’t get completely cleared out or an error occurs along the way. </span></p>
<p><span>To repair the damage, you can use WordPress’s repair mode. </span></p>
<p><span>Go back to </span><strong>Site </strong><span>> </span><strong>File Manager</strong><span> or </span><strong>FTP Accounts</strong><span>. Open and edit the </span><strong>wp-config.php</strong><span> file once more. </span></p>
<p><span>Locate the following:</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixmxx"><div class="rouge-syntax-highlight"><table class="rouge-line-table php"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #949494">/* That's all, stop editing! Happy blogging. */</span>
</pre></td>
</tr></tbody></table></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ie20c"><p><span>Directly above it, add this line of code:</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqxsj"><div class="rouge-syntax-highlight"><table class="rouge-line-table php"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">define</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">'WP_ALLOW_REPAIR'</span><span style="color: #d0d0d0">,</span> <span style="color: #d28445">true</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr></tbody></table></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iogec">
<p><span>Save your changes. </span></p>
<p><span>Open a new tab in your browser and enter the following: </span></p>
<p><strong>https://yourdomain.com/wp-admin/maint/repair.php</strong></p>
<p><span>Replace </span><em><span>yourdomain </span></em><span>with your actual website’s domain name. Then click the </span><strong>Repair Database</strong><span> button that appears. </span></p>
<p><span>Once repair mode has completed, visit your website once more to check for the connection error. </span></p>
<p><span>Whether or not the error has been removed, you’ll need to go back to the </span><strong>wp-config.php</strong><span> file to delete the repair mode string. Save your changes when you’re done to take your site out of repair mode.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ikg07"><h3 id="toc-y6hl-solution-4-check-for-and-replace-corrupted-files"><span>Solution #4: Check For and Replace Corrupted Files</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqm3w"><p><span>Theme and plugin conflicts and file corruptions can happen. So too can issues with the WordPress software. So if nothing else has worked until now, it’s time to see what happens when you put these files to the test.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilxq1"><h4 id="toc-47k7-test-your-theme"><span>Test Your Theme</span></h4></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iu6rz">
<p><span>From your </span><strong>File Manager</strong><span> or </span><strong>FTP</strong><span>, look for a folder called </span><strong>wp_content</strong><span>. This is where both your themes and plugins are stored. </span></p>
<p><span>Locate the folder called </span><strong>themes</strong><span>. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="in1u">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg" alt="In your website's File Manager or FTP, look for a folder at the root called wp-content and one inside it called themes. You can deactivate your themes by renaming this folder." loading="lazy" width="870px" height="454px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg" alt="In your website's File Manager or FTP, look for a folder at the root called wp-content and one inside it called themes. You can deactivate your themes by renaming this folder." loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg" alt="In your website's File Manager or FTP, look for a folder at the root called wp-content and one inside it called themes. You can deactivate your themes by renaming this folder." loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_find_themes.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ivon6">
<p><span>Right-click the folder name and click </span><strong>Rename</strong><span>. Change it to </span><strong>old-themes</strong><span>. This will force WordPress to deactivate your current theme and enable the default one in its place. </span></p>
<p><span>Check your website to see if that fixed the issue. If it did, then the latest version of your theme is conflicting with a plugin or with WordPress. </span></p>
<p><span>To see if it’s a plugin conflict, rename the folder back to </span><strong>themes</strong><span>. Then proceed with the plugins test.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iq5dp"><h4 id="toc-9nyd-test-your-plugins"><span>Test Your Plugins</span></h4></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ienzi">
<p><span>Go to the </span><strong>plugins </strong><span>folder and do the same thing. Change the name to </span><strong>old-plugins</strong><span>. Again, this will deactivate all your WordPress plugins. </span></p>
<p><span>Check your site once more. If the issue has been resolved, that means that one of your plugins (or a recent update of one of them) is conflicting either with another plugin, the theme, or WordPress itself. </span></p>
<p><span>Since you can now log into WordPress, go to the </span><strong>Plugins </strong><span>panel. Reactivate each plugin one at a time. Refresh your site to see if it remains live. If it does, then you can cross that plugin off your list. </span></p>
<p><span>Deactivate that plugin and then move onto the next one. Repeat this process until you’ve tested each plugin on its own. </span></p>
<p><span>If there are no issues at this point, the issue isn’t a plugin/theme conflict. So it might be two plugins conflicting. You’ll need to work your way through different pairings to see where the issue lies. </span></p>
<p><span>To more effectively hone in on the issue, contact your web hosting support to see if they can tell you which of your plugins were most recently updated (in case you don’t remember). That’ll help you pinpoint the conflict. </span></p>
<p><span>Once you’ve found the issue, you can either roll the plugin back to the previous version that works or find an alternative solution. It’s also a good idea to notify the plugin developer and/or theme developer of the issue.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixfnw"><h4 id="toc-o081-test-wordpress"><span>Test WordPress</span></h4></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iusnf">
<p><span>If nothing else has worked, then the problem could be WordPress or the latest version of it. </span></p>
<p><span>Unfortunately, in order to fix this kind of error, you’re going to have to replace the core version of the software. While it won’t affect the main content of your site, it will erase any custom coding you’ve done or changes you’ve made in the</span><strong> wp-config.php</strong><span> or </span><strong>.htaccess</strong><span> files. </span></p>
<p><span>If you’re uncomfortable with doing this step, that’s not a problem. Move to the next solution.</span></p>
<p><span>To replace WordPress, </span><a href="https://wordpress.org/download/"><strong>Get WordPress</strong></a><span> from the WordPress.org site. Download the latest version of the software. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ivdy4">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg" alt="You can download a fresh version of the WordPress software from WordPress.org. Go to the Get WordPress page for the latest file." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg" alt="You can download a fresh version of the WordPress software from WordPress.org. Go to the Get WordPress page for the latest file." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg" alt="You can download a fresh version of the WordPress software from WordPress.org. Go to the Get WordPress page for the latest file." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_download_wp.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ip8yk">
<p><span>Unzip the file. Delete the </span><strong>wp-config-sample.php</strong><span> file along with the </span><strong>wp-content</strong><span> folder. </span></p>
<p><span>You’ll need FTP access to your core to upload the new WordPress file. If you don’t have it yet, you can create an </span><strong>FTP Account</strong><span> in SiteGround. Then use </span><a href="https://filezilla-project.org/"><span>FileZilla</span></a><span> to upload and replace the WordPress core files. </span></p>
<p><span>When you’re done, check your WordPress site to see if the error is resolved. If it is, you can restore all of your themes and plugins to where they were previously.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ih7p1"><h3 id="toc-7keo-solution-5-restore-your-last-backup"><span>Solution #5: Restore Your Last Backup</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijn0w">
<p><span>If WordPress still fails to establish a database connection, then you’ll want to roll it back to the last saved version of the database. </span></p>
<p><span>There are different tools WordPress users use to capture website backups. You might be using </span><a href="https://webdesign.tutsplus.com/best-backup-plugins-for-wordpress--cms-39581a"><span>WordPress backup plugins</span></a><span> like UpdraftPlus and Jetpack. Or you could be using your web hosting’s backup service. </span></p>
<p><span>For this example, we’ll use SiteGround’s backups to roll your database back. </span></p>
<p><span>In SiteGround, go to </span><strong>Site Tools </strong><span>> </span><strong>Security </strong><span>> </span><strong>Backups</strong><span>. Scroll down to the list of backups. </span></p>
<p><span>Click the vertical ellipsis to the right of the most recent backup (i.e. not the one you saved while troubleshooting today). Select the </span><strong>Restore Databases</strong><span> option.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iu1si">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg" alt="In SiteGround, go to Security and Backups to restore the latest version of your database (or entire site) with just a couple clicks." loading="lazy" width="870px" height="356px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg" alt="In SiteGround, go to Security and Backups to restore the latest version of your database (or entire site) with just a couple clicks." loading="lazy" width="650px" height="269px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg" alt="In SiteGround, go to Security and Backups to restore the latest version of your database (or entire site) with just a couple clicks." loading="lazy" width="380px" height="162px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108253/image-upload/db_connection_error_restore_db_backup.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="infok">
<p><span>Select the database or databases you want to restore. Check the box stating that you understand the action you’re about to take. Then click </span><strong>Confirm</strong><span>. </span></p>
<p><span>After the backup restoration process is done, visit your website to see if the error is gone. If it is, then something that took place between now and that last backup caused the issue. </span></p>
<p><span>If you’re unsure of what that might be (like a plugin update, a team member poking around, etc.), get in touch with your hosting provider. They should be able to take a look in your logs and figure out what went wrong.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itnsm"><h3 id="toc-rquk-solution-6-contact-your-web-host"><span>Solution #6: Contact Your Web Host</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ibm0o">
<p><span>If you have come this far, then the last thing you can do is to contact your web host’s support team. There are additional issues that can cause the </span><strong>Error establishing a database connection</strong><span> to appear and only they will be able to help. </span></p>
<p><span>For example: </span></p>
<ul>
<li><span>The servers are down or undergoing maintenance. </span></li>
<li><span>Your database reached or exceeded its limit due to excessive traffic.</span></li>
<li><span>Your website has been hacked. </span></li>
</ul>
<p><span>When you contact support, let them know the issue you’re seeing when you try to access WordPress or your website. Send them a screenshot of the error message if possible. Also explain the solutions you’ve tried up until this point. </span></p>
<p><span>This will save time as they narrow down the issue and work to get it resolved for you.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5chk"><h2 id="toc-jsal-conclusion"><span>Conclusion</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilsni">
<p><span>It’s stressful whenever an error appears on your website. One day, everything’s working fine. The next, you’ve lost access to WordPress and your visitors are being shown a blank page and error message. </span></p>
<p><span>Thankfully, we know where the source of this WordPress </span><strong>error establishing a database connection</strong><span> lies. This will make it a whole lot easier to find what’s causing it.</span></p>
<p><span>Time is of the essence when it comes to WordPress errors, especially one like this that may scare away visitors. Once you identify what the error is, work your way through the six solutions above so you can get your website restored as soon as possible. </span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/37899/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37899/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37899/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/37899/a2t.img" width="1" /></div>
2023-12-28 14:38:00 UTC
2023-12-28 14:38:00 UTC
Suzanne Scacca
tag:code.tutsplus.com,2005:PostPresenter/cms-34530
2020-01-19T15:14:49+00:00
What Is WordPress?
<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="ikuml">
<p><span>If you’re thinking about building a website, you’ve likely come across the name WordPress. As far as website builder software goes, WordPress is #1 and with good reason.</span></p>
<p><span>In this post, we’ll explore what WordPress is, unpack the most common questions asked about it, and give you some tips to get started.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itgo"><h2 id="toc-p2ib-what-is-wordpress"><span>What Is WordPress?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itxji"><p><a href="https://wordpress.org/"><span>WordPress</span></a><span> is the most popular content management system (CMS) in the world. A CMS is an application that enables users to build websites, create code-free designs, and manage their content with ease.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i88s9">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg" alt="The home page for the website WordPress.org." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg" alt="The home page for the website WordPress.org." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg" alt="The home page for the website WordPress.org." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ictty"><p><span>Originally launched back in 2003 as a blogging platform called b2/cafelog, WordPress has come a long way. Of all the websites known to use a content management system, </span><a href="https://w3techs.com/technologies/overview/content_management"><span>62.7% are built with WordPress</span></a><span>.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iifgv"><h3 id="toc-zpj8-what-is-wordpress-used-for"><span>What Is WordPress Used For?</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iddub"><p><span>There are no limits to what type of website you can build with WordPress. For example, you can build:</span></p></div><div data-content-block-type="Grid" class="content-block content-block-grid"><div class="element-row two-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide">
<div class="element-col"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9lsg"><ul>
<li><span>Business websites</span></li>
<li><span>Personal sites</span></li>
<li><span>Blogs</span></li>
<li><span>Magazines</span></li>
<li><span>Forums</span></li>
<li><span>Social networks</span></li>
</ul></div></div>
<div class="element-col"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izoix"><ul>
<li><span>Portfolios</span></li>
<li><span>eCommerce shops</span></li>
<li><span>Marketplaces</span></li>
<li><span>Membership sites</span></li>
<li><span>Media publications</span></li>
<li><span>Nonprofit sites</span></li>
</ul></div></div>
</div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6smo"><p><span>You can also create websites for all kinds of niches. If you </span><a href="https://themeforest.net/category/wordpress?" data-action="click->ga-analytics#sendMarketClickEvent"><span>go to the ThemeForest website</span></a><span>, you’ll find many examples of the types of websites you can make with WordPress. Agency sites. Jewelry stores. AI technology sites. Auto parts shops. And much more.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz62">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg" alt="A screenshot from the search results page on ThemeForest. It shows the newest bestselling themes for WordPress." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg" alt="A screenshot from the search results page on ThemeForest. It shows the newest bestselling themes for WordPress." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg" alt="A screenshot from the search results page on ThemeForest. It shows the newest bestselling themes for WordPress." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_bestsellers.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ia6l"><p><span>There are no limits with WordPress. The trick is to find the right tools to help you turn your vision into a website.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i043"><h3 id="toc-2fxk-who-can-use-wordpress"><span>Who Can Use WordPress?</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ix9n">
<p><span>WordPress is for everyone. You can be a complete novice who has never used a website builder before. Or you can be a seasoned web developer building your 150th website. </span></p>
<p><span>The great thing about WordPress is that you don’t need to be a professional web designer or coder in order to use it. The not-so-great thing is that there is a slight learning curve simply because there’s so much you can do with WordPress.</span></p>
<p><span>It doesn’t take long to learn your way around the CMS though. If you’re looking for resources to help you get started, skip down to the bottom of this post.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/34530/image-upload/sites.jpg" alt="wordpress websites" loading="lazy" width="870px" height="474px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/34530/image-upload/sites.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/34530/image-upload/sites.jpg" alt="wordpress websites" loading="lazy" width="650px" height="357px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/34530/image-upload/sites.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/34530/image-upload/sites.jpg" alt="wordpress websites" loading="lazy" width="380px" height="212px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/34530/image-upload/sites.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ihuh"><h3 id="toc-77ik-do-you-need-to-learn-coding-to-use-wordpress"><span>Do You Need to Learn Coding to Use WordPress?</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5xs">
<p><span>Nope. You can build a website without ever having to write or edit a single line of code. </span></p>
<p><span>That said, unlike some other website builders that severely limit how much access you have to the backend, WordPress doesn’t do that. If you want to custom code a website (or you’ve hired a designer or developer who wants to), there are no restrictions.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ii4n"><h3 id="toc-sav7-what-is-the-difference-between-wordpressorg-and-wordpresscom"><span>What Is the Difference Between WordPress.org and WordPress.com?</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iwa3j">
<p><span>When you do a search for “wordpress”, you’re going to stumble upon two different websites. They both use the same WordPress software. However, the difference is in how they’re hosted and what sorts of capabilities are available to you.</span></p>
<p><a href="https://wordpress.com/"><span>WordPress.com</span></a><span> is what’s known as a </span><em><span>hosted </span></em><span>CMS. This means you don’t need to purchase separate web hosting in order to use it. Nor do you need to deal with the technical aspects of maintaining a website, like security and speed.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ipvt2">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg" alt="A look at the list of Pages on the WordPress.com backend." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg" alt="A look at the list of Pages on the WordPress.com backend." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg" alt="A look at the list of Pages on the WordPress.com backend." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpresscom_backend.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqd8m">
<p><span>WordPress.com does have a free plan available. However, your website will contain WordPress branding on it and you’ll be limited in terms of what you can build, which themes and plugins you can use, and so on. You can upgrade to a paid plan to unlock these features though. </span></p>
<p><a href="https://wordpress.org/"><span>WordPress.org</span></a><span> is what’s known as a </span><em><span>self-hosted</span></em><span> CMS. This means that you need to buy a domain name and web hosting before you do anything. You also have to install WordPress on your server and then maintain that software yourself.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz3qi">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg" alt="A look at the WordPress.org backend and main Dashboard." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg" alt="A look at the WordPress.org backend and main Dashboard." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg" alt="A look at the WordPress.org backend and main Dashboard." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpressorg_backend.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6261"><p><span>In exchange, though, you’ll have total control over the websites you build with WordPress.org. There are no limitations aside from perhaps server space and your budget, but those can always be adjusted. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iewyk"><h2 id="toc-2nch-is-wordpress-free"><span>Is WordPress Free?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijzkf"><p><span>Technically, yes. The WordPress software is free to download and use from WordPress.org. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iscmh">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg" alt="You can download a copy of the WordPress software for free from the wordpress.org website." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg" alt="You can download a copy of the WordPress software for free from the wordpress.org website." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg" alt="You can download a copy of the WordPress software for free from the wordpress.org website." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_get_wordpress.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="impv7">
<p><span>That said, WordPress’s real power lies in the vast collections of themes and plugins that the WordPress community has developed and continues to develop for the platform. </span></p>
<p><span>While you can find free plugins for WordPress, </span><a href="https://themeforest.net/" data-action="click->ga-analytics#sendMarketClickEvent"><span>the most versatile and powerful WordPress themes</span></a><span> cost some money. So too will your web hosting plan and domain name. </span></p>
<p><span>But that’s pretty standard for website builders. You’ll either have to pay a flat monthly fee to use something like Wix or Squarespace or you’ll pay upfront for the technologies needed to power your website with WordPress.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ispyg"><h2 id="toc-1bxd-what-are-the-benefits-of-using-wordpress"><span>What Are the Benefits of Using WordPress?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irvfp">
<p><span>There are plenty of </span><a href="https://webdesign.tutsplus.com/best-wordpress-alternatives-for-all-your-needs--cms-93620t"><span>WordPress alternatives</span></a><span> out there. For instance: </span></p>
<ul>
<li><a href="https://webdesign.tutsplus.com/drupal-vs-wordpress-which-is-better-for-you--cms-93128a"><span>Drupal</span></a></li>
<li><a href="https://webdesign.tutsplus.com/joomla-vs-wordpress-which-one-should-you-use--cms-93619a"><span>Joomla</span></a></li>
<li><a href="https://webdesign.tutsplus.com/squarespace-vs-wordpress-which-website-builder-is-best-for-you--cms-93341a"><span>Squarespace</span></a></li>
<li><a href="https://webdesign.tutsplus.com/webflow-vs-wordpress-which-one-should-you-use--cms-93269a"><span>Webflow</span></a></li>
<li><a href="https://webdesign.tutsplus.com/weebly-vs-wordpress-which-one-should-you-use--cms-93268a"><span>Weebly</span></a></li>
<li><a href="https://webdesign.tutsplus.com/wix-vs-wordpress-5-important-differences--cms-93127a"><span>Wix</span></a></li>
</ul>
<p><span>You’ll also find alternatives to WordPress’s eCommerce software WooCommerce. </span><a href="https://webdesign.tutsplus.com/what-is-shopify--cms-36741a"><span>Shopify</span></a><span> is the most popular one. </span></p>
<p><span>So why do more than 60% of people building websites these days choose to go with WordPress? There are various reasons why: </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixs4e"><h3 id="toc-1uua-its-cost-effective"><span>1. It’s Cost Effective</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="isziw"><p><span>So long as you don’t go wild and buy a bunch of plugins you don’t need or extra themes you won’t use, you can keep website-related costs low. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0292"><h3 id="toc-2ihu-its-open-source"><span>2. It’s Open Source</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iij8t">
<p><span>Open source means that WordPress isn’t owned by an individual or a company. Because of this, everyone is free to contribute to it. </span></p>
<p><span>This is why WordPress has the largest community of collaborators and contributors. Everyone wants to work towards making it the best CMS it can be. There’s a dedicated group of contributors who ensure that the software remains secure and updated. </span></p>
<p><span>In addition, you’ll find all the support you need from the WordPress community. Even if there isn’t a direct line to call or chat with WordPress, there are top-tier designers, developers, and WordPress power users who can answer your questions. </span></p>
<p><span>Plus, most of the common questions and issues that arise with WordPress have been dealt with in endless blog posts, tutorials, and YouTube videos. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iebhl"><h3 id="toc-l6y6-themes-and-plugins"><span>3. Thousands of Themes and Plugins</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ifxuo">
<p><span>On a related note, the world of web design and development changes frequently. When a new design trend arises or the modern user experience changes, someone develops a plugin or a theme to fill that void. </span></p>
<p><span>Unlike with other website builders, WordPress users have access to </span><a href="https://wordpress.org/plugins/"><span>a free plugin repository</span></a><span> filled with nearly 60,000 plugins. Each plugin includes genuine, helpful user reviews that make finding the perfect plugin an easy task.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i61g2">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg" alt="WordPress.org has nearly 60,000 plugins available for free, including popular plugins like Elementor, Yoast SEO, WooCommerce, and Akismet." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg" alt="WordPress.org has nearly 60,000 plugins available for free, including popular plugins like Elementor, Yoast SEO, WooCommerce, and Akismet." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg" alt="WordPress.org has nearly 60,000 plugins available for free, including popular plugins like Elementor, Yoast SEO, WooCommerce, and Akismet." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_wordpress_plugins.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="is6l3"><p><span>There’s also no shortage of amazing WordPress themes for users to choose from. ThemeForest, for example, has more than 11,000 beautiful themes and website templates made specifically for WordPress.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iw0xg">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg" alt="A look at a few of the bestselling themes on ThemeForest includes Avada, The7, Betheme, and Enfold." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg" alt="A look at a few of the bestselling themes on ThemeForest includes Avada, The7, Betheme, and Enfold." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg" alt="A look at a few of the bestselling themes on ThemeForest includes Avada, The7, Betheme, and Enfold." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_themeforest_themes.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0zts"><p><span>With WordPress, you won't be limited by your design skills or your imagination. There are so many great add-ons being developed all the time to help you create the website of your dreams and with little effort, too.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ifhlj"><h3 id="toc-ee5t-youll-have-complete-control"><span>4. You’ll Have Complete Control</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izoyg">
<p><span>When you use a hosted website builder, there’s a tradeoff. </span></p>
<p><span>Hosted solutions simplify the technical side of building and managing a website. So you’ll never have to deal with hosting, database management, security, or performance optimization. You also won’t get much control over search engine optimization. </span></p>
<p><span>With WordPress, those limits don’t exist:</span></p>
<ul>
<li><span>You choose your web hosting plan. </span></li>
<li><span>You decide how you want to protect your website from hackers and human error. </span></li>
<li><span>You optimize your site for the best performance.</span></li>
<li><span>You install plugins that allow you to improve each page’s search ranking. </span></li>
<li><span>You even get to fine-tune the backend of your website in ways that hosted website builders won’t allow you to. </span></li>
</ul>
<p><span>And if you know how to code and want the option to do so, you can do this with WordPress.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i7r52"><h3 id="toc-l7vr-youll-build-better-websites"><span>5. You’ll Build Better Websites</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0vrg">
<p><span>You won’t just be able to build better looking websites with WordPress. Because of how extensible the platform is, your websites can also be mobile responsive, accessible, multilingual, and search-optimized. </span></p>
<p><span>You won’t need advanced technical skills to create higher quality websites either. </span></p>
<p><span>The WordPress editor and page builder plugins all make responsive editing easy, for instance. If there is additional functionality you want to incorporate into your site, all it takes is a few clicks to install a plugin that will do most of the work for you, too. </span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz80p"><h2 id="toc-mrnr-what-are-the-drawbacks-of-using-wordpress"><span>What Are the Drawbacks of Using WordPress?</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iluxh"><p><span>While there are clear advantages to using WordPress, there are a couple drawbacks to be aware of. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izr8c"><h3 id="toc-3mj8-the-learning-curve"><span>1. The Learning Curve</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="if56c">
<p><span>If you compare the WordPress dashboard to one from a hosted website builder, you might feel overwhelmed. It’s not that it’s poorly labeled or disorganized. However, there is a lot in there and it’s going to grow as you start to install themes and plugins.</span></p>
<p><span>WordPress will get easier to use over time. The trick is to use it regularly and to install tools that work for your comfort level. </span></p>
<p><span>For instance, rather than try to adapt to the WordPress page builder, a novice user would be better off installing the </span><a href="https://webdesign.tutsplus.com/reasons-you-should-upgrade-to-elementor-pro--cms-41472a"><span>Elementor Pro plugin</span></a><span>. The drag-and-drop interface and widgets are much more user-friendly.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itczl"><h3 id="toc-qrzj-technical-maintenance"><span>2. Technical Maintenance</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="imzhj">
<p><span>With hosted website builders, there’s little to no technical maintenance to speak of. You’ll never receive alerts that your software is out of date, for instance. You also won’t have to do things like:</span></p>
<ul>
<li><span>Back up your website</span></li>
<li><span>Activate caching</span></li>
<li><span>Install an SSL certificate</span></li>
<li><span>Clean up your database</span></li>
<li><span>Update your theme and plugins</span></li>
</ul>
<p><span>Hosted website builders take care of all this stuff for you. This comes with a price though.</span></p>
<p><span>For instance, scaling your website as your enterprise grows may be difficult to do with other CMS. You also won’t have much visibility into how secure your website is. Also, if your site goes down or gets hacked, you’ll be dependent on the website builder to help you restore it. </span></p>
<p><span>With WordPress, this is all under your control. While it may create more work for you, the trade off might be worth it. </span></p>
<p><span>Before choosing a CMS, figure out what’s most important to you </span><em><span>today </span></em><span>as you build your website. Also, start thinking about what you want the site to do for you years down the road. </span></p>
<p><span>If you want it to grow alongside your business, the power and control that WordPress offers is unmatched.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ir9uf"><h2 id="toc-p2n7-how-to-get-started-with-wordpress"><span>How to Get Started with WordPress</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ihp8o"><p><span>You can have a new WordPress website up and running in less than an hour. Here’s what you’ll do: </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i51am"><h3 id="toc-ku14-pick-a-domain-name"><span>1. Pick a Domain Name</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5cnq">
<p><span>You can use </span><a href="https://business.tutsplus.com/series/naming-your-business--cms-602"><span>your business name</span></a><span> if it’s short enough. If it’s too long or complicated, use a succinct but memorable name or acronym instead. </span></p>
<p><span>There shouldn’t be any spaces or dashes in the name. Just make it one long string.</span></p>
<p><span>Use </span><a href="https://www.domain.com/"><span>Domain.com</span></a><span> to check the availability of domain names.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixnma">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg" alt="The Domain.com website allows you to search for domain names you're interested in buying" loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg" alt="The Domain.com website allows you to search for domain names you're interested in buying" loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg" alt="The Domain.com website allows you to search for domain names you're interested in buying" loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_check_domain_name.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i62sl"><p><span>You’ll also have to decide on a top-level domain (TLD). That’s the part after the final period, like </span><em><span>.com</span></em><span>, </span><em><span>.gov</span></em><span>, or </span><em><span>.co.uk</span></em><span>. Try not to pick an obscure TLD (no matter how cheap it might be) since it can make it hard for people to find or remember your site’s address.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i2q6g"><h3 id="toc-hix4-purchase-hosting"><span>2. Purchase Hosting</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz13o"><p><span>Buy a hosting plan and domain name from your </span><a href="https://webdesign.tutsplus.com/web-hosting-vs-wordpress-hosting--cms-35215a"><span>web hosting provider</span></a><span>. </span><a href="https://www.siteground.com/"><span>SiteGround</span></a><span> is a good choice for WordPress websites. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ifhp7">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg" alt="This is the landing page for SiteGround's WordPress website hosting plans." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg" alt="This is the landing page for SiteGround's WordPress website hosting plans." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg" alt="This is the landing page for SiteGround's WordPress website hosting plans." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_siteground_web_hosting.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irfpo"><p><span>You’ll find hosting plans for web, WordPress as well as WooCommerce. In addition, most plans include unlimited traffic, free migration service, auto-updates and backups, a free SSL and CDN, and more. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixrzi"><h3 id="toc-l1dm-install-wordpress-with-one-click"><span>3. Install WordPress with One Click</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0vzr"><p><span>After you’ve finished signing up for your web hosting, you’ll be asked if you want to install your content management system. If you choose a WordPress or WooCommerce hosting plan, it’ll take you directly to the installer. Otherwise, select the correct website builder from the list. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i7vl1">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg" alt="From inside your SiteGround account, select either the WordPress or WordPress+WooCommerce CMS to install with one click." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg" alt="From inside your SiteGround account, select either the WordPress or WordPress+WooCommerce CMS to install with one click." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg" alt="From inside your SiteGround account, select either the WordPress or WordPress+WooCommerce CMS to install with one click." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_wordpress.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iiwho"><p><span>Start the one-click installation process. When it finishes, you’ll need to create your admin login credentials. Choose a unique username (not “admin”) as well as a strong password. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ik6lt"><h3 id="toc-fvg7-log-into-wordpress"><span>4. Log Into WordPress</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ih8er"><p><span>Use your admin login credentials to log into WordPress.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itt1l">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg" alt="The WordPress login page will ask for your username and password." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg" alt="The WordPress login page will ask for your username and password." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg" alt="The WordPress login page will ask for your username and password." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_log_in_wordpress.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i3oqx">
<p><span>Once inside, spend some time getting to know the different areas of the dashboard and sidebar. </span></p>
<p><span>The sidebar is where you’ll spend most of your time. From creating and editing Pages and Posts to installing and customizing Themes and Plugins, this is your control center for WordPress.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9ucz"><h3 id="toc-5lwk-create-your-website"><span>5. Create Your Website</span></h3></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i61bw"><p><span>When you’re ready to get to work on your website, start by finding and installing a theme. By default, WordPress will install one of their own for you. </span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iji77">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg" alt="By default, WordPress will install the latest WordPress-built themes for you. They'll be named for the year they were released (like "Twenty Twenty-Four")." loading="lazy" width="870px" height="433px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg" alt="By default, WordPress will install the latest WordPress-built themes for you. They'll be named for the year they were released (like "Twenty Twenty-Four")." loading="lazy" width="650px" height="326px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg" alt="By default, WordPress will install the latest WordPress-built themes for you. They'll be named for the year they were released (like "Twenty Twenty-Four")." loading="lazy" width="380px" height="195px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108244/image-upload/what_is_wordpress_install_theme.jpg 2x"></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ibdlo">
<p><span>These themes are pretty basic and limited in scope. </span></p>
<p><span>If you’re looking for something built for a specific niche, that’s feature rich, and that will allow you to bring your unique vision to life, take a look through </span><a href="https://webdesign.tutsplus.com/t/tutorials/search/best+wordpress+themes"><span>the best WordPress themes</span></a><span>. </span></p>
<p><span>Once you’ve found one you love, go into the Themes panel in WordPress and upload your file. Most themes have a Setup Wizard to help you get started with customizing your site. </span></p>
<p><span>As you begin to fill in your content, you’ll start to discover extra things you need. Like a tool to help you optimize your content for search, a payment gateway so you can make money, and so on. </span><a href="https://webdesign.tutsplus.com/t/tutorials/search/best+wordpress+plugins"><span>WordPress plugins</span></a><span> help you add these features to your site without the need for any code.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icfpm"><h2 id="toc-lbph-learn-wordpress">Learn WordPress With Envato</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iu7lr"><ul>
<li><a href="https://elements.envato.com/learn/features-of-the-twenty-twenty-three-wordpress-theme" target="_blank" rel="noopener" data-action="click->ga-analytics#sendElementsClickEvent">7 Features of the Twenty Twenty-Three WordPress Theme You Need to Know</a></li>
<li><a href="https://webdesign.tutsplus.com/is-wordpress-free--cms-93123a" target="_self">Is WordPress Free?</a></li>
<li><a href="https://webdesign.tutsplus.com/squarespace-vs-wordpress-which-is-better-for-you--cms-93126a" target="_self">Squarespace vs. WordPress: Which Is Better for You?</a></li>
</ul></div><div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="ip7vw">
<div class="embed-course-details__wrapper div-container">
<div class="div-container">
<div class="embed-course-summary__wrapper content-container"> <div class="free-course__label">FREE</div>
<div class="embed-course__duration">
<i class="fa fa-clock-o far fa-clock"></i>
<span>2.3 Hours</span>
</div>
</div>
<h2>WordPress for Beginners | FREE COURSE</h2>
</div>
<div class="embed-course__contents div-container" id="ihgzj">
<div class="embed-course__description" id="imlmn"><p>Learn how to use WordPress from start to finish in this free WordPress tutorial for beginners. It is the only WordPress beginner's guide you'll ever need!</p></div>
<ul class="embed-course__chapters-title-list"></ul>
</div>
</div>
<div class="embed-course-video__wrapper content-container"> <figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=MsRhxl_zk5A&t=0">
<iframe src="https://www.youtube.com/embed/MsRhxl_zk5A?rel=0&start=0" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure> </div>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="isfem"><h2 id="toc-qeul-conclusion"><span>Conclusion</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6rj8">
<p><span>WordPress is the most popular content management system in the world. With it, you can build websites for business, personal use, ecommerce, blogging, digital portfolios, and more. And the best part is, anyone can use it. No special skills or coding knowledge are needed. </span></p>
<p><span>If this is your first time building a website with WordPress, you don’t have to figure out how to use the CMS on your own. Lean on the WordPress community for support. Also, find trusted resources that will help you learn how to use WordPress like a pro.</span></p>
<p><span>Tuts+ is one such resource. Here you’ll find </span><a href="https://webdesign.tutsplus.com/t/tutorials/search/wordpress"><span>written tutorials</span></a><span> along with </span><a href="https://webdesign.tutsplus.com/t/courses/search/wordpress"><span>courses</span></a><span> that teach you everything you need to know to master WordPress. The </span><a href="https://www.youtube.com/@envatotuts/search?query=wordpress"><span>Tuts+ YouTube channel</span></a><span> also has a bunch of WordPress content to help you get started.</span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/34530/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34530/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34530/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/34530/a2t.img" width="1" /></div>
2023-12-12 12:48:00 UTC
2023-12-12 12:48:00 UTC
Adi Purdila