Hi everyone,
Welcome to my blog. In this post, I will show you how to code your first DOM project.
In this project, We want the Background Image will be changed after we manipulate the DOM i.e. after clicking time of the day.**
Link- time-of-the-day-picker.netlify.app
Github Link- github.com/shubhamsigdar1/Background-Picker
What is DOM?
When we do rendering/Painting on our HTML and CSS in a browser i.e. make some changes and as we refresh our webpage all those changes are gone i.e. we re-rendered or repainted our HTML and CSS files i.e. called DOM
How we can add behavior and interaction to DOM so that we can manipulate the DOM?
We use the JavaScript to manipulate the DOM
Note:-When we manipulate the DOM, We do not manipulate with actual HTML, CSS file
How to get started?
1. Install VS Code code.visualstudio.com/download
2. Install the extension(open in browser) in Vs Code.
3. In your text editor, create a folder Background-Picker and then create three separate files i.e. HTML, CSS, and JavaScript. This just basically makes your code more organized.
Resources
1. Images from this website:- freepik.com
2. fonts from this website :- fonts.google.com/specimen/Kaushan+Script
Let's Start working on projects
First, we start from HTML files, where you can link CSS and JavaScript files using the code below:
Below is the HTML code
In the above HTML code,
1. Code to link your HTML with the CSS file and we write it inside the head tag
2. Code to link your HTML with the JavaScript file and we write it inside the body tag
Below is the CSS code
In the above CSS code,
1. How I do this portion using flexbox?
I give parent section two property display: flex; and flex-wrap : wrap;
display: flex;
Whenever we want to use flexbox, We have to apply display: flex inside the parent container
flex-wrap : wrap;
This property helps you set the number of flex-items you want in a line or row.
2. How I add images in a section?
I use always this property for img tag and Section in which we have to put the image I apply property "overflow: hidden;"
Below is the JavaScript code
In the above JavaScript code,
1. We want that when we click the images of the day and then run the function morn(), For that, we write code
2. When the button is clicked on morning image what first thing function morn() needs to figure out?
3. How to add background image in DOM?
./ starts in the same folder as the file that is making the reference
you could also just do img/evening.jpg
../ - goes up one level
/ would start at the root (your C: drive or whatever drive you are on locally... when you host, it starts at yoursite.com)