Movie App using HTML, CSS and JavaScript.[Source Code]
To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.
-
DOCTYPE Declaration and HTML Tag:
- Declares the HTML document type and specifies the language as English.
-
Head Section:
- Includes the viewport meta tag for responsive design.
- Sets the title of the webpage as "Movie Guide App".
- Links the Google Font "Poppins" to be used in the document.
- Links an external stylesheet named "style.css" for additional styling.
-
Body Section:
- Contains a container div that wraps the content of the webpage.
- Inside the container, there's a search container div which includes an input field for entering movie names and a button for initiating the search.
- Displays search results in a div with the id "result".
-
Script Section:
- Defines a JavaScript block for adding interactivity to the webpage.
- Initializes variables to reference the input field, search button, and result container.
- Defines a function getMovie() to fetch movie data from the OMDb API based on the user's input.
- Sets up event listeners for the search button click event and the window load event to trigger the getMovie() function.
- Dynamically updates the content of the result div based on the fetched movie data or error messages.
CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.
-
Universal Selector:
- Resets padding and margin to 0, and sets the box-sizing to border-box to include padding and border in the element's total width and height.
- Sets the default font family to "Poppins", sans-serif.
-
Body Styles:
- Sets the height of the body to 100vh (viewport height).
- Applies a linear gradient background from #000000 (black) to #ffb92a (golden yellow) at a 50% split.
-
Container Styles:
- Sets the font size to 16px.
- Limits the width to 90vw (viewport width) with a maximum width of 37.5em.
- Applies padding, background color, border radius, and box shadow for styling.
- Centers the container horizontally and vertically on the page using absolute positioning and transform.
-
Script Section:
- Defines a JavaScript block for adding interactivity to the webpage.
- Initializes variables to reference the input field, search button, and result container.
- Defines a function getMovie() to fetch movie data from the OMDb API based on the user's input.
- Sets up event listeners for the search button click event and the window load event to trigger the getMovie() function.
- Dynamically updates the content of the result div based on the fetched movie data or error messages.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#000000 50%, #ffb92a 50%);
}
.container {
font-size: 16px;
width: 90vw;
max-width: 37.5em;
padding: 3em 1.8em;
background-color: #201f28;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1.2em;
}
.search-container input,
.search-container button {
font-size: 0.9em;
outline: none;
border-radius: 0.3em;
}
.search-container input {
background-color: transparent;
border: 1px solid #a0a0a0;
padding: 0.7em;
color: #ffffff;
}
.search-container input:focus {
border-color: #ffffff;
}
.search-container button {
background-color: #ffb92a;
border: none;
cursor: pointer;
}
#result {
color: #ffffff;
}
.info {
position: relative;
display: grid;
grid-template-columns: 4fr 8fr;
align-items: center;
margin-top: 1.2em;
}
.poster {
width: 100%;
}
h2 {
text-align: center;
font-size: 1.5em;
font-weight: 600;
letter-spacing: 0.06em;
}
.rating {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
margin: 0.6em 0 0.9em 0;
}
.rating img {
width: 1.2em;
}
.rating h4 {
display: inline-block;
font-size: 1.1em;
font-weight: 500;
}
.details {
display: flex;
font-size: 0.95em;
gap: 1em;
justify-content: center;
color: #a0a0a0;
margin: 0.6em 0;
font-weight: 300;
}
.genre {
display: flex;
justify-content: space-around;
}
.genre div {
border: 1px solid #a0a0a0;
font-size: 0.75em;
padding: 0.4em 1.6em;
border-radius: 0.4em;
font-weight: 300;
}
h3 {
font-weight: 500;
margin-top: 1.2em;
}
p {
font-size: 0.9em;
font-weight: 300;
line-height: 1.8em;
text-align: justify;
color: #a0a0a0;
}
.msg {
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
.info {
grid-template-columns: 1fr;
}
.poster {
margin: auto;
width: auto;
max-height: 10.8em;
}
}
<->
Movie App using HTML, CSS and JavaScript, please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.Conclusion
Congratulations on completing our comprehensive guide to Movie App using HTML, CSS and JavaScript! Throughout this tutorial, you've delved into the fundamentals of front-end development, from crafting the HTML structure to adding interactivity with JavaScript.
Remember, web development is an ever-evolving field, and this project is just the beginning. Keep experimenting, exploring, and refining your skills. Join developer communities, seek feedback, and stay curious—there's always more to learn!
Explore
codinglabsolution says...
code copied
code copied