diff --git a/IMC_WebDev/FromDayToNight-CreatingInteractiveColorPalettesWithJavaScript/blog.md b/IMC_WebDev/FromDayToNight-CreatingInteractiveColorPalettesWithJavaScript/blog.md
new file mode 100644
index 0000000..296e455
--- /dev/null
+++ b/IMC_WebDev/FromDayToNight-CreatingInteractiveColorPalettesWithJavaScript/blog.md
@@ -0,0 +1,396 @@
+# From Day to Night - Creating Interactive Color Palettes with JavaScript
+
+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 more, bringing 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 `` tags for each button in the `body` element:
+
+```html
+...
+
+
+
+
+...
+```
+
+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 `
` 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
+...
+
+
+ ....
+
+
+...
+```
+
+This is what our completed additions to the HTML code should look like:
+
+```html
+...
+
+
+
+
+
+
+
+...
+```
+
+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:
+
+```html
+...
+
+...
+```
+
+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:
+
+```css
+...
+#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:
+
+```css
+...
+#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:
+
+```css
+...
+#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 `
` 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:
+
+```css
+...
+#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:
+
+```css
+...
+
+...
+```
+
+This selector accesses all `