Forem: Emily Gui

From Day to Night - Creating Interactive Color Palettes with JavaScript

Emily Gui — Mon, 31 Aug 2020 23:55:44 +0000

Now that you have completed setting up your Mini City in HTML and CSS, have you ever wondered what your Mini City would look like at night? Let's create a day-to-night color palette change by adding buttons with JavaScript! JavaScript is a programming language that is used to create interactive designs, such as buttons, pop-up windows, and so on, and brings user interaction to web development projects.

In this tutorial, you will learn how to do the following:

Create buttons with HTML
Stylize elements with CSS
Add interactivity with JavaScript

Setting Up Elements in HTML and CSS

HTML Code

Before we start incorporating interactivity into our Mini City with JavaScript, we first need to set up these elements by adding to our HTML code.

In order to switch from a daytime to nighttime color palette, we will create two clickable buttons, labelled "day" and "night", that will allow us to select the desired setting. To do this, we will add a set of <button></button> tags for each button in the body element:

...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>
...

To prepare for our planned color changes, we need to assign an id attribute for each element that is involved, and this allows these elements to be stylized in CSS and manipulate in JavaScript.

To create a sun that can change into a moon for our Mini City, we will add a <div> element with an id named "sun". To change the color of the sky, we must access the background-color attribute of the body element, so we will set up an id named "body". Add the following lines of code to the body element:

...
<!--HTML-->
  <body>
    ....
    <div id = "sun"></div>   
    <body id = "body"></body>   
...

This is what our completed additions to the HTML code should look like:

...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>

    <div id = "sun"></div>   
    <body id = "body"></body>   
...

This is what our Mini City should look like so far:

CSS Code: Sun and Moon Elements

Now that we have set up our elements in HTML, we can start adjusting and stylizing them in CSS.

For our sun element, we will be adding a #id selector into our CSS code:

...
<style TYPE="text/css">
    ...
    #sun {

    }
</style>
...

This kind of selector accesses the element that has the id listed after the hashtag, so whatever we add in this selector will affect the sun element, which we declared in our HTML code.

For our #sun selector, we will first create the shape and color of the sun using the following attributes:

...
#sun {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#FFF89E, #FFDE45);
}
...

With our width and height attributes having the same length, the default shape that will be created is a square. The border-radius attribute defines the radius of the sun's corners, and setting this attribute to 50% will create a perfect circle. Then, in the background attribute, we can determine the color of our sun by using the radial-gradient function, which creates a gradual transition of colors — the first declared color (light mellow yellow) will be the color at the center of the sun, and the second color (brighter warm yellow) will be the color along the edge of the sun.

Then, we will determine the location of the sun by adding the following attributes:

...
#sun {
    ...
    position: absolute;
    left: 350px;
    bottom: 75px;
}
...

Similar to the other elements in our Mini City, we will declaring the absolute value to the sun's position attribute, which allows the element to move along with the webpage's document body. The left attribute affects the element's horizontal position by pushing the sun more to the side, and bottom attribute affects the element's vertical position by lifting the sun upwards.

This is what our sun should look like in our Mini City:

In preparation for our day-to-night change, we can also create our moon element by using the same code template we have for our sun element:

...
#sun {
    ...
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...

For our moon, we will use a new selector labelled #moon and change the colors in the radial-gradient function — the color at the center of our moon will be a light cool gray, and the color at the edges will be a dark grayish violet.

At this point, we will not be able to view our moon element because we have not declared a <div> element for it in our HTML code. We do not need to declare this because will only be switching back and forth between these two selectors, which we will code in JavaScript later on.

This is what our completed #sun and #moon elements should look like:

...
#sun {
    position: absolute;
    left: 350px;
    bottom: 75px;
    background: radial-gradient(#FFF89E, #FFDE45);
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...

CSS Code: Day and Night Buttons

To start stylizing our buttons' properties, we will be adding a button selector into our code:

...
<style TYPE="text/css">
    ...
    button {

    }
</style>
...

This selector accesses all <button> elements declared in the HTML code, which are our day and night buttons.

First, we will adjust the color and position of our buttons with the following attributes:

...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;
}
...

By setting the position attribute to relative, this will allow us to adjust the location of the buttons from their "normal" position, which is the center of the webpage, using the top and right attributes — the values that we inputted will move buttons to the area below our sun. We will also set the buttons' color to white using the background-color attribute.

Then, we will add a border to our buttons by adding the following attributes:

...
button {
    ...
    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;
}
...

For all the border properties to show up, the border-style attribute first must be set. Above, we set our buttons' borders to solid that will result in a solid colored border. Feel free to experiment with different kinds of borders from this CSS Border Styles list. As for the additional border attributes, border-width andborder-color adjust the border's thickness and color, respectively, and border-radius adjusts the roundness of the corners of the border — this particular property allows up to four values, each value accessing each corner of the element.

Finally, we will change the font of the text of our buttons with the last two following attributes:

...
button {
    ...
    font-size: 15px;
    font-family: "Consolas";
}
...

The font-size attribute will adjust the size of the buttons' font. Also, feel free to customize your buttons' font by testing out fonts from this CSS font list and setting it to your font-family attribute. You can also add additional attributes, such as font-style and font-weight, to stylize your buttons even more.

This is what our completed button element should look like:

...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;

    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;

    font-size: 15px;
    font-family: "Consolas";
}
...

This is what our Mini City should like so far:

Adding Interactivity with JavaScript

JavaScript Code

In order to be able to code in JavaScript in our HTML file, we will insert a set of <script></script> tags into the body element of our HTML code, underneath the code we added above:

...
<!--HTML-->
  <body>
      <button>day</button>
      <button>night</button>

      <div id = "sun"></div>   
      <body id = "body"></body> 

      <script>
      </script>
...

If we want to manipulate the colors of the sun/moon element and the background, we must retrieve our sun and body elements, respectively, by calling on their id.

To do this, we will declare a var or variable — circle for the sun element and sky for the body element — and then access each element by using the document method getElementById():

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
</script>
...

Since we already established the moon element for our planned color palette change, we should also choose the color we want our night sky to be.

To do this, we will create an array named colors that will contain the color of our daytime sky and nighttime sky:

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];
</script>
...

The first color in the array is our default daytime color, which is the light blue that we currently set, and the second color is for our nighttime color palette, which is a dark cool blue.

Now, to set up our day and night color palettes, we will set up two functions labelled day and night:

...
<script>
    ...
    function day() {

      }
    function night() {

      }
</script>
...

For each function, we will need to establish two changes: one for our sun-to-moon switch, and another for our day-to-night color change.

To display our sun during the day and our moon at night, we will retrieve information from our #sun and #moon elements by using the setAttribute() method on our circle variable. For the two required parameters, we will set the id of this variable to the sun and moon elements for the day and night color palettes, respectively:

...
function day() {
    circle.setAttribute("id", "sun");
}
function night() {
    circle.setAttribute("id", "moon");
}
...

To set our sky colors for the daytime and nighttime, we will accessing the backgroundColor attribute of the body element through our sky variable by appending .style.backgroundColor to retrieve and manipulate the CSS properties of this variable. Then, we will set this equal to its respective color of the day and night color palettes in our colors array (the index of an array always starts from the number 0, so colors[0] is referring to the daytime color while colors[1] is referring to the nighttime color):

...
function day() {
    circle.setAttribute("id", "sun");
    sky.style.backgroundColor = colors[0];
}
function night() {
    circle.setAttribute("id", "moon");
    sky.style.backgroundColor = colors[1];
}
...

This is what your completed JavaScript code should look like:

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];

    function day() {
        circle.setAttribute("id", "sun");
        sky.style.backgroundColor = colors[0];
      }
      function night() {
        circle.setAttribute("id", "moon");
        sky.style.backgroundColor = colors[1];
      }
</script>
...

To tie everything together, we need move back to our HTML code to link our day() and night() functions to our day and night buttons, respectively, by adding the onclick event to each button:

...
<!--HTML-->
  <body>
    <button onclick = "day()">day</button>
    <button onclick = "night()">night</button>
...

Now, you can interact with your Mini City by changing the time of day through the click of a button:

Conclusion

Congrats on adding an interactive color component to your Mini City!

Throughout this tutorial, we designed buttons in JavaScript and learned how to stylize and link these elements in HTML and CSS.

Feel free to add more decorative features to your buttons or implement more actions under the day and night functions to create a more distinct switch between the changing times of the day. Though this blog series may only serve as a very simple introduction to these programming tools, hopefully, this project has sparked your interest and/or built your confidence in web development and design.

How to Build Your Own Website - Introduction to HTML, CSS, and JavaScript

Emily Gui — Wed, 15 Jul 2020 22:45:34 +0000

The world of web development and design is rapidly growing. Whether you're establishing a professional online presence, showcasing a design portfolio, or recording your everyday life, creating a website has become a popular way to connect with the world. As the selection of frameworks and tools continues to expand, however, figuring out this process may seem daunting and overwhelming to beginner coders.

For those who are beginners, this blog is a great way to ease into the basics of web development.

In this tutorial, you will learn how to do the following:

Install a code editor
Code HTML, CSS, and JavaScript files
Run a functional basic website

Coding Environment

Getting Started

We will be using Visual Studio Code as our source code editor, a text editor specialized for writing computer programs, to create the files for our website. In order to get started, download Visual Studio Code and install the right version for your computer.

HTML, CSS, and JavaScript Files

First, open your terminal or command prompt, which is a command line system on your operating system that allows you to execute commands on your computer, and type the following:

code index.html style.css interact.js

This will automatically create, name, and open the three files you'll need for your website in Visual Studio Code. Save each file by selecting File > Save and exit the app with File > Exit. Create and name a new folder (we named our folder "website") and move the three files into it to keep them all in one place. Then, in Visual Studio Code, go to File > Open Folder to open your folder and display your files.

Building the Foundation: HTML File

HTML stands for Hypertext Markup Language and is the standard markup language, which is a computer processing system designed for annotating and presenting text, for displaying content on a website.

In your index.html file, type in the following lines of code:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

This is the basic underlying structure used for most websites online. Before we start editing our code, let us look over what we currently have and understand what each part represents.

<!DOCTYPE html> indicates which version of HTML is being used; in this case, we are using the latest version, HTML5.

HTML code is composed of elements, or chunks of information stored between a set of opening and closing tags—for instance, <html></html> are the opening and closing tags for the html element. Think of these elements as separate boxes with each indented element as a smaller box within a larger enclosing box, marked by its opening and closing tags.

To create the title of our website, add text between the <title></title> tags:

...
  <head>
    <title>My Website</title>
  </head>
...

Even though it won't be displayed on the web page, having a title is important because it represents your website in search engines, becomes the default name of your website when it's bookmarked, and allows for easy navigation of this page of your website.

To add text to the body of the web page, we will use a heading tag <h1></h1>, which is a ranked tag that can be numbered up to <h6></h6>, and a paragraph tag <p></p> between the opening and closing tags of the body element. Write any text you would like to feature on your web page between these tags:

...
  <body>
      <h1>My Website</h1>
      <p>Hello World.</p>
      <p>This is my website.</p>
  </body>
...

If you want to enter multiple blocks of text separated by line breaks, you must use another <p></p> element for each indented block of text. HTML will not be able to detect or display the line breaks in your code onto your web page.

To add an image to our web page, we will use an image tag <img>, which does not have a closing tag because it is a void element. Void elements can't hold any kind of content besides attributes, which are additional bits of information featured in an element's heading tag. The <img> tag will include two attributes, src and alt. The src attribute will contain the URL or file name of the image. If the image can't load on the website, the alt attribute will display an alternative text message in replacement of that image. Add any image and text description you would like to have on your web page:

...
  <body>
      <img src="image.png" alt="Bit Project Cube">
      <h1>My Website</h1>
      <p>Hello world.</p>
      <p>This is my website.</p>
  </body>
...

Note that if you are using a local image from your computer, you must place the file in the same folder as the other three files for your website.

Now, we can run our website and see what we've created so far. Go into your folder and double-click on your html file—this will prompt your website to open in a web browser:

Stylizing Content: CSS File

CSS stands for Cascading Style Sheets and is the standard style sheet language for defining and stylizing aspects on a website.

Before we can add anything to our CSS file, we need to link our CSS file in our HTML file by adding a <link /> tag to the head element. The <link /> uses a ref attribute, which describes the relationship between the HTML file and the linked file, and a href attribute, which states the location or name of the linked file. Add the following line to the head element of your HTML file:

...
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css" />
  </head>
...

To start stylizing our website, let's go over how CSS works.

A CSS file is called a stylesheet, which is a template file that consists of a web page's font and layout settings. Stylesheets are composed of declaration blocks that are defined by a selector and contain attributes between curly brackets. For our website, we will use an img selector and a body selector to customize the image and text of our web page:

img {

}

body {

}

For the img selector, we will add the width attribute, which will determine the width of all images on our web page in pixels. To alter how your image appears, feel free to run your website multiple times, increasing and decreasing the number of pixels in between each run until you are satisfied with the result:

img {
    width: 200px;    
}
...

For the body selector, we will first adjust the characteristics of the text on our page by adding the following attributes and values:

...
body {
    font-family: helvetica;
    text-align: center;
}

You can customize the font of the text on your website by selecting a value from this CSS font list and adding it to your font-family attribute. There are also many other attributes you can add to your body selector to stylize the text on your website, such as font-style, font-size, font-weight, and so on. The center value for the text-align attribute will center whatever is listed inside the body element in your HTML file.

Then, we can add some color to our website by adding the following attributes:

...
body {
    font-family: helvetica;
    text-align: center;

    background: aliceblue;
    color:  darkslategray;
}

You can customize the color of your web page and its text by using the background attribute and the color attribute, respectively. Feel free to browse this browser-supported colors list and select any color you would like to use for your website.

This is what your completed CSS file should look like:

Now, let us run our file again to review the stylizations we have added to our website:

Adding Interactivity: JavaScript File

JavaScript is a programming language used in web development to add interactivity to websites through dynamic behavior such as buttons, pop-up windows, and so on. For our website, we will add an element that displays today's date on our website, and the following JavaScript code we will use for this interactive feature is based on this Microsoft Docs Module.

Before we start coding our JavaScript file, we need to create an element in our HTML file to display our date by adding a set of <p></p> tags with an id attribute. This assigns a unique identity named today to an HTML element that can be stylized by CSS and/or manipulated by JavaScript. We also need to link our JavaScript file in the HTML file by adding a set of <script></script> tags with a src attribute to our head element:

...  
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css" />
    <p id="today"></p>
    <script src="interact.js"></script>
  </head>
...

This is what your completed HTML file should look like:

Moving back to our JavaScript file, we first need to activate strict mode for our website to prevent any silent errors from occurring by decreasing the chance of JavaScript making any false assumptions:

'use strict'

To acquire the current date, we will create a variable named currentDay. To retrieve the data we need, use the new operator to instantiate a new Date() object:

let currentDay = new Date();

To format the data into today's date, we will create another variable named newFormat and use toDateString(). This will remove the time and time zone from the data we received and only reveal today's date:

let newFormat = currentDay.toDateString();

To add this data onto the website, we will create one more variable named getData to retrieve our today element from our HTML file by using getElementById() :

let getData = document.getElementById('today');

Finally, after retrieving our today element, we need to insert the data we received into it by using innerHTML and equate it to our newFormat variable to finish our JavaScript code:

'use strict'

let currentDay = new Date();
let newFormat = currentDay.toDateString();
let getData = document.getElementById('today');
getData.innerHTML = newFormat;

This is what your completed JavaScript file should look like:

We've completed the code for our website!

Conclusion

Congrats on creating your own website!

Throughout this tutorial, we discussed the basic components of a website's structure—HTML, CSS, and JavaScript—and built a solid foundation of knowledge that will let you dive into the world of web development and design with confidence.

Feel free to continue adding more features like photos, music, and additional pages to your site by researching the other attributes you can create with HTML, CSS, and JavaScript—the possibilities are endless! By using this website as a base for future endeavors, you will learn to flesh out the complexity of your web design projects, turn your web application ideas into a reality, and potentially even jumpstart a career as a web developer.