Skip to content

Commit 009a3a4

Browse files
2 parents 48e38ea + 617c2db commit 009a3a4

File tree

21 files changed

+511
-0
lines changed

21 files changed

+511
-0
lines changed

MovieInfoApp/0kt1/README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Movie Details Website
2+
3+
A simple JavaScript web application to search for and display movie details.
4+
5+
6+
## Features
7+
8+
- Enter a movie name and get details about the movie.
9+
- Uses the OMDB API to fetch movie data.
10+
- Responsive and user-friendly design.
11+
12+
13+
## Images
14+
15+
16+
- [Screenshots](images/Screenshot1.png)
17+
- [Screenshots](images/Screenshot2.png)
18+
- [Screenshots](images/Screenshot3.png)
19+
- [Screenshots](images/Screenshot4.png)
20+
21+
22+
23+
24+
25+
502 KB
Loading
592 KB
Loading
597 KB
Loading
600 KB
Loading

MovieInfoApp/0kt1/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Movie Details</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<h1>Movie Details</h1>
14+
<input type="text" id="movieInput" placeholder="Enter a movie name">
15+
<button id="searchButton">Search</button>
16+
17+
</div>
18+
<div id="movieDetails">
19+
<!-- Movie details will be displayed here -->
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

MovieInfoApp/0kt1/script.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const apiKey = '76d079f0'; // Get an API key from http://www.omdbapi.com/apikey.aspx
2+
3+
const movieInput = document.getElementById('movieInput');
4+
const searchButton = document.getElementById('searchButton');
5+
const movieDetails = document.getElementById('movieDetails');
6+
7+
searchButton.addEventListener('click', () => {
8+
const movieName = movieInput.value.trim();
9+
10+
if (movieName !== '') {
11+
fetch(`http://www.omdbapi.com/?t=${movieName}&apikey=${apiKey}`)
12+
.then((response) => response.json())
13+
.then((data) => {
14+
if (data.Response === 'True') {
15+
// Display movie details
16+
movieDetails.innerHTML = `
17+
<div class = "float-container">
18+
<div class= "float-child">
19+
<img src="${data.Poster}" alt="${data.Title} poster">
20+
</div>
21+
<div class= "float-child">
22+
<h2>${data.Title}</h2>
23+
<h4 style="display: inline">Year:</h4> <p style="display: inline">${data.Year} </p><br>
24+
<h4 style="display: inline">Director:</h4> <p style="display: inline">${data.Director} </p><br>
25+
<h4 style="display: inline">Genre:</h4> <p style="display: inline">${data.Genre} </p><br>
26+
<h4 style="display: inline">Actors:</h4> <p style="display: inline">${data.Actors} </p><br>
27+
<h4 style="display: inline">PLot:</h4> <p style="display: inline">${data.Plot} </p><br>
28+
</div>
29+
</div>
30+
31+
32+
33+
`;
34+
} else {
35+
movieDetails.innerHTML = 'Movie not found.';
36+
}
37+
})
38+
.catch((error) => {
39+
console.error('Error fetching data:', error);
40+
movieDetails.innerHTML = 'An error occurred while fetching data.';
41+
});
42+
}
43+
});

MovieInfoApp/0kt1/style.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Reset some default styles */
2+
body, h1, p {
3+
font-family: 'Poppins', Arial, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
h2{
9+
color:#ffffff;
10+
font-family: 'Poppins', Arial, sans-serif;
11+
}
12+
13+
body {
14+
/* font-family: Arial, sans-serif; */
15+
background-color: #000000;
16+
font-family: 'Poppins', Arial, sans-serif;
17+
}
18+
19+
.container {
20+
max-width: 600px;
21+
margin: 0 auto;
22+
padding: 20px;
23+
background-color: #1aa0c9;
24+
background-image: linear-gradient(to top left, rgb(1, 14, 19), rgb(30, 41, 163));
25+
border-radius: 8px;
26+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
27+
text-align: center;
28+
}
29+
30+
h1 {
31+
font-size: 30px;
32+
font-weight: 500;
33+
margin-bottom: 20px;
34+
color: #ffffff;
35+
}
36+
37+
p{
38+
color: #ffffff;
39+
}
40+
41+
42+
input[type="text"] {
43+
font-family: 'Poppins', Arial, sans-serif;
44+
width: 90%;
45+
padding: 10px;
46+
border: 1px solid #032b34;
47+
border-radius: 24px;
48+
font-size: 16px;
49+
margin-bottom: 10px;
50+
color: #ffffff;
51+
background-color: #000000;
52+
}
53+
54+
button {
55+
font-family: 'Poppins', Arial, sans-serif;
56+
background-color: #1db512;
57+
color: #000000;
58+
border: none;
59+
border-radius: 4px;
60+
padding: 10px 20px;
61+
font-size: 16px;
62+
cursor: pointer;
63+
}
64+
65+
button:hover {
66+
background-color: #000000;
67+
color: #ffffff;
68+
}
69+
70+
#movieDetails {
71+
margin-top: 20px;
72+
margin: auto;
73+
text-align: center;
74+
}
75+
76+
img {
77+
max-width: 100%;
78+
height: auto;
79+
margin-top: 10px;
80+
border-radius: 8px;
81+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
82+
}
83+
84+
h4{
85+
color: #158631;
86+
}
87+
88+
.float-container {
89+
border: 1px solid rgb(255, 255, 255);
90+
margin: 1rem;
91+
padding: 2rem 2rem;
92+
text-align: center;
93+
}
94+
95+
.float-child {
96+
display: inline-block;
97+
/* border: 1px solid red; */
98+
padding: 1rem 1rem;
99+
vertical-align: middle;
100+
text-align: left;
101+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#PASSWORD STRENGTH CHECKER
2+
3+
##Overview
4+
The Password Strength Checker is a web application built using HTML, CSS, and JavaScript. It provides a user-friendly interface for assessing the strength of passwords. Users can input a password, and the application will evaluate its strength based on various criteria.
5+
6+
##Features
7+
- Password Input: Users can enter a password into the application.
8+
- Strength Evaluation: The application assesses the strength of the password based on criteria such as length, complexity, and character types.
9+
- Strength Indicator: A visual or textual indicator is provided to show the strength of the password (e.g., Weak, Medium, Strong).
10+
- User-Friendly: The interface is designed to be user-friendly and intuitive, making it easy for users to understand the strength of their passwords.
11+
- Styling and Presentation: The application is styled with CSS to ensure a pleasant and visually appealing user experience.
12+
13+
##SCREENSHOTS
14+
![Alt text](image.png)
15+
![Alt text](image-1.png)
16+
![Alt text](image-2.png)
17+
53.5 KB
Loading

0 commit comments

Comments
 (0)