Event Organizers Website Using Html Css And JavaScript
Introduction
Hello coders, welcome to another new blog. As you know that our today’s project is a event management website which we’ve build using HTML, CSS and JavaScript. A event management is usually known as a group of people or an organization which manages any type of event and provide management services. We’ve used HTML, CSS and JavaScript to build this project.
To create this project we need the frontend technologies which are HTML , CSS and JS. HTML sets up the basic structure for our website. In other words we can say that it makes a skeleton of our website. Then CSS styles our webpage and make it visually appealing and make it interactive for the user experience. Lastly, the JavaScript makes our webpage functional. JavaScript is generally used to provide functionality to the webpages.
If you guys also want to create this type of project then all you need is the basic knowledge of HTML, CSS and JavaScript. If you’ve knowledge of these core frontend technologies than you’re good to go. These type of project enhances our programming skills and makes strong our logic building mind. Let’s understand the code.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code. This code sets up the basic structure for our website. This code builds all the element which are necessary for our webpage. Let’s breakdown our HTML(hyper text markup language) code.
- <!DOCTYPE html> : This ensure the document type of our file as html.
- <title> : This sets up the title of our webpage as Event organisers.
- <link> : This links all the files and cdn to the page which we’re gonna need later in our project.
- <body> : body tag contains whole content of our web page.
- <header> : This contains header of our webpage. It has a navbar and a logo name for the website.
- <nav> : it contains all the menu buttons and each button is for its related section.
- <section class=”home”> : home section contains a heading, a button and some swiping photos which displays the previous events held by organization.
- <div class=”content”> : it contains a h3 and anchor tag.
- <div class=”swiper-container”> : This section contains all the images which we can swipe and see the next. SwiperJs is used for this functionality.
- <section class=”services”> : This section contains a heading and some boxes which displays the services that are provided by us.
- <div class=”box-container”> : It contains all the boxes for services and each box has some heading, paragraph and a icon.
- <section class=”about”> : This is about section which displays the information about the company. It contains a image and some other tags.
- <div class=”content”> : This contains a heading, two paragraphs about company and one button with the text reach us.
- <section class=”gallery”> : This contains all the images of the events and display it to the users. It contains one heading and some boxes for the images.
- <div class=”box-container”> : This container works same like the services section. Each box has some content and icons related to its image.
- <section class=”price”> : This section displays the plans and prices of the services that are provided by the company. It contains different types of plans which user can select according to their preference.
- <div class=”box-container”> : This box container also works same like the previous two containers. It contains the price, the benefits and all the additional services which are included in the respective plans.
- <div class=”swiper-wrapper”> : This section contains the testimonials of the websites. Testimonials are something which displays the feedbacks of the user and it makes a big impact on any organization. Each testimonial contains a user name, their review and some images with icon. This section has 3 to 4 testmonials.
- <section class=”contact”> : It contains a heading at the top of the section. It has a form using which user can contact or interact with the organization.
- <form> : This form contains some input boxes and text area elements for the name, mail and message etc.
- <footer> : footer contains the branches of the organizations, quick links and social media links.
- <div class=”theme-toggler”> : This contains a heading tag and some buttons using which you can choose the theme for your webpage
- <script> : The script tag adds cdn and js files to the page.
<!--Created by developergtm-->
<title>Event Organisers | developergtm</title>
<!--swiper css-->
<!--font awesome-->
<!--css file-->
<!-- header section starts -->
<header class="header">
<a href="#" class="logo"><span>Developer</span>gtm</a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#service">service</a>
<a href="#about">about</a>
<a href="#gallery">gallery</a>
<a href="#price">price</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
</nav>
<div id="menu-bars" class="fas fa-bars"></div>
</header>
<!-- home section starts -->
<section class="home" id="home">
<div class="content">
<h3>
where your ideas take off
<span> kanasu events </span>
</h3>
<a href="#" class="btn">get quote</a>
</div>
<div class="swiper-container home-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img decoding="async" src="images/home1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img decoding="async" src="images/home2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img decoding="async" src="images/home3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img decoding="async" src="images/home4.jpg" alt="" />
</div>
<div class="swiper-slide">
<img decoding="async" src="images/home5.jpg" alt="" />
</div>
<div class="swiper-slide">
<img decoding="async" src="images/home6.jpg" alt="" />
</div>
</div>
</div>
</section>
<!-- service section starts -->
<section class="service" id="service">
<h1 class="heading">our <span>services</span></h1>
<div class="box-container">
<div class="box">
<i class="fas fa-envelope"></i>
<h3>invitation card design</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
<div class="box">
<i class="fas fa-photo-video"></i>
<h3>photos and videos</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
<div class="box">
<i class="fas fa-music"></i>
<h3>entertainment</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
<div class="box">
<i class="fas fa-car"></i>
<h3>enent vehicles</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
<div class="box">
<i class="fas fa-map-marker-alt"></i>
<h3>venue selection</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
<div class="box">
<i class="fas fa-birthday-cake"></i>
<h3>food catering</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro,
suscipit.
</p>
</div>
</div>
</section>
<!-- about section starts -->
<section class="about" id="about">
<h1 class="heading"><span>about</span> us</h1>
<div class="row">
<div class="image">
<img decoding="async" src="images/about.jpg" alt="" />
</div>
<div class="content">
<h3>your occasion deserves our careful planning</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
labore fugiat ut esse perferendis perspiciatis provident dolores
fuga in facilis culpa possimus, quia praesentium itaque, sapiente
quasi harum rem asperiores.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat
vero expedita incidunt provident quibusdam aut odit, numquam
nesciunt similique nisi.
</p>
<a href="#" class="btn">reach us</a>
</div>
</div>
</section>
<!-- gallery section starts -->
<section class="gallery" id="gallery">
<h1 class="heading">our <span>gallery</span></h1>
<div class="box-container">
<div class="box">
<img decoding="async" src="images/gallery1.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery2.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery3.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery4.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery5.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery6.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery7.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery8.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
<div class="box">
<img decoding="async" src="images/gallery9.jpg" alt="" />
<h3 class="title">best events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>
</div>
</section>
<!-- price section starts -->
<section class="price" id="price">
<h1 class="heading">our <span>pricing</span></h1>
<div class="box-container">
<div class="box">
<h3 class="title">basic</h3>
<h3 class="amount">$879.00</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li><i class="fas fa-check"></i> decorations</li>
<li><i class="fas fa-check"></i> music and photos</li>
<li><i class="fas fa-check"></i> food and drinks</li>
<li><i class="fas fa-check"></i> invitation card</li>
</ul>
<a href="#" class="btn">check out</a>
</div>
<div class="box">
<h3 class="title">prime</h3>
<h3 class="amount">$799.00</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li><i class="fas fa-check"></i> decorations</li>
<li><i class="fas fa-check"></i> music and photos</li>
<li><i class="fas fa-check"></i> food and drinks</li>
<li><i class="fas fa-check"></i> invitation card</li>
</ul>
<a href="#" class="btn">check out</a>
</div>
<div class="box">
<h3 class="title">luxury</h3>
<h3 class="amount">$379.00</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li><i class="fas fa-check"></i> decorations</li>
<li><i class="fas fa-check"></i> music and photos</li>
<li><i class="fas fa-check"></i> food and drinks</li>
<li><i class="fas fa-check"></i> invitation card</li>
</ul>
<a href="#" class="btn">check out</a>
</div>
<div class="box">
<h3 class="title">ultra</h3>
<h3 class="amount">$920.00</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li><i class="fas fa-check"></i> decorations</li>
<li><i class="fas fa-check"></i> music and photos</li>
<li><i class="fas fa-check"></i> food and drinks</li>
<li><i class="fas fa-check"></i> invitation card</li>
</ul>
<a href="#" class="btn">check out</a>
</div>
</div>
</section>
<!-- review section starts -->
<section class="reivew" id="review">
<h1 class="heading">client's <span>review</span></h1>
<div class="review-slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="images/img1.jpg" alt="" />
<div class="user-info">
<h3>nayana</h3>
<span>happy customer</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
dolor dicta cum. Eos beatae eligendi, magni numquam nemo sed ut
corrupti, ipsam iure nisi unde et assumenda perspiciatis
voluptatibus nihil.
</p>
</div>
<div class="swiper-slide box">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="images/img2.jpg" alt="" />
<div class="user-info">
<h3>lisa</h3>
<span>happy customer</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
dolor dicta cum. Eos beatae eligendi, magni numquam nemo sed ut
corrupti, ipsam iure nisi unde et assumenda perspiciatis
voluptatibus nihil.
</p>
</div>
<div class="swiper-slide box">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="images/img3.jpg" alt="" />
<div class="user-info">
<h3>mary</h3>
<span>happy customer</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
dolor dicta cum. Eos beatae eligendi, magni numquam nemo sed ut
corrupti, ipsam iure nisi unde et assumenda perspiciatis
voluptatibus nihil.
</p>
</div>
<div class="swiper-slide box">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="images/img4.jpg" alt="" />
<div class="user-info">
<h3>rose</h3>
<span>happy customer</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
dolor dicta cum. Eos beatae eligendi, magni numquam nemo sed ut
corrupti, ipsam iure nisi unde et assumenda perspiciatis
voluptatibus nihil.
</p>
</div>
</div>
</div>
</section>
<!-- contact section starts -->
<section class="contact" id="contact">
<h1 class="heading"><span>contact</span> us</h1>
<div class="inputBox">
</div>
<div class="inputBox">
</div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</section>
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>branches</h3>
<a href="#"> <i class="fas fa-map-marker-alt"></i> bangalore </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> hyderabad </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> delhi </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> kolkata </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> chennai </a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#"> <i class="fas fa-arrow-right"></i> home </a>
<a href="#"> <i class="fas fa-arrow-right"></i> service </a>
<a href="#"> <i class="fas fa-arrow-right"></i> about </a>
<a href="#"> <i class="fas fa-arrow-right"></i> gallery </a>
<a href="#"> <i class="fas fa-arrow-right"></i> price </a>
<a href="#"> <i class="fas fa-arrow-right"></i> reivew </a>
<a href="#"> <i class="fas fa-arrow-right"></i> contact </a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a>
<a href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a>
<a href="#"> <i class="fas fa-envelope"></i> kanasu@gmail.com </a>
<a href="#"> <i class="fas fa-envelope"></i> kanasuind@gmail.com </a>
<a href="#">
<i class="fas fa-map-marker-alt"></i> bangalore, india - 560054
</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#"> <i class="fab fa-instagram"></i> instagram </a>
<a href="#"> <i class="fab fa-linkedin-in"></i> linkedin </a>
</div>
</div>
<div class="credit">
created by <span>developergtm</span> | all rights reserved
</div>
</section>
<!-- theme toggler -->
<div class="theme-toggler">
<div class="toggle-btn">
<i class="fas fa-cog"></i>
</div>
<h3>choose color</h3>
<div class="buttons">
<div class="theme-btn" style="background: #ccff33"></div>
<div class="theme-btn" style="background: #d35400"></div>
<div class="theme-btn" style="background: #f39c12"></div>
<div class="theme-btn" style="background: #1abc9c"></div>
<div class="theme-btn" style="background: #3498db"></div>
<div class="theme-btn" style="background: #9b59b6"></div>
</div>
</div>
<!-- Swiper JS -->
<!--JS file-->
CSS (Style.css)
This is our CSS code which styles our webpage and makes our page visually appealing. We generally use CSS to style the webpages. Let’s understand our code.
- The code starts with importing the poppins font from the google fonts.
- The root selector defines the default theme color for the webpage.
- Universal selector sets font family poppins, resets margin padding, ensures box-sizing as border box. It disables outline, border and text decorations.
- The html tag sets the font size and simplify the spacing calculations. Body sets the background color as #222 for the dark theme.
- Header sets position fixed with zero padding from all directions. It sets dark bg with centering the elements using flexbox.
- Text is styled uppercase themed colored span. The .btn class creates stylish buttons with rounded corners and hover effects that change the background to the theme color.
- The .service and .box-container uses CSS grid for centering the elements and ensure all the cards appears good on layout.
- Each .box element include icons, headings and some text.
- About section contains heading, image and some other headings/ text with a reach us button. It is designed using the CSS properties.
- The .gallery and .box-container also uses CSS Grid for a clean arrangement of image cards. The .box element has some hover animations.
- The pricing section aligns cards with dynamic resizing. Each .box includes a .title, .amount, and features list for clarity. A hover effect is also added to it.
- Review section has a heading in the center and some box testimonials. Each box has some customer name, review and some icon, all these are styled well for interacting interface
- Contact us section styles all the input boxes using display flex properties for alignment of input fields.
- The .footer is structured with Grid for responsive organization. Links expand on hover, and the .credit section attributes the design with a highlighted span featuring the theme color.
- The theme color are styled so that user can specifically select any color according to their preference.
- Media queries are used to make our page responsive and make it visually appealing for different screen sizes.
/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
:root {
--theme-color: #3867d6;
}
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 7rem;
scroll-behavior: smooth;
}
body {
background: #222;
}
section {
padding: 2rem 9%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
background: #333;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 9%;
}
.header .logo {
font-weight: bolder;
color: #fff;
font-size: 2.5rem;
}
.header .logo span {
color: var(--theme-color);
}
.header .navbar a {
font-size: 1.7rem;
color: #fff;
margin-left: 2rem;
}
.header .navbar a:hover {
color: var(--theme-color);
}
#menu-bars {
font-size: 3rem;
color: #fff;
cursor: pointer;
display: none;
}
.home .content {
text-align: center;
padding-top: 6rem;
margin: 2rem auto;
max-width: 70rem;
}
.home .content h3 {
color: #fff;
font-size: 4.5rem;
text-transform: uppercase;
}
.home .content h3 span {
color: var(--theme-color);
text-transform: uppercase;
}
.btn {
margin-top: 1rem;
display: inline-block;
padding: 0.8rem 3rem;
font-size: 1.7rem;
border-radius: 0.5rem;
background: #666;
color: #fff;
cursor: pointer;
font-weight: 600;
}
.btn:hover {
background: var(--theme-color);
}
.home .home-slider .swiper-slide {
overflow: hidden;
border-radius: 0.5rem;
height: 50rem;
width: 35rem;
}
.home .home-slider .swiper-slide img {
height: 100%;
width: 100%;
object-fit: cover;
}
.heading {
text-align: center;
padding-bottom: 2rem;
color: #fff;
text-transform: uppercase;
font-size: 4rem;
}
.heading span {
color: var(--theme-color);
text-transform: uppercase;
}
.service .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
gap: 1.5rem;
}
.service .box-container .box {
border-radius: 0.5rem;
background: #333;
text-align: center;
padding: 2.5rem;
}
.service .box-container .box i {
height: 6rem;
width: 6rem;
line-height: 6rem;
border-radius: 50%;
font-size: 2.5rem;
background: var(--theme-color);
color: #fff;
}
.service .box-container .box h3 {
font-size: 2rem;
color: #fff;
padding: 1rem 0;
}
.service .box-container .box p {
font-size: 1.4rem;
color: #eee;
line-height: 1.8;
}
.about .row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.about .row .image {
flex: 1 1 45rem;
padding: 1rem;
}
.about .row .image img {
width: 100%;
border-radius: 0.5rem;
border: 1rem solid #333;
}
.about .row .content {
flex: 1 1 45rem;
}
.about .row .content h3 {
font-size: 3.5rem;
color: #fff;
}
.about .row .content p {
font-size: 1.5rem;
color: #eee;
padding: 1rem 0;
line-height: 2;
}
.gallery .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
gap: 1.5rem;
}
.gallery .box-container .box {
position: relative;
border: 1rem solid #333;
border-radius: 0.5rem;
height: 25rem;
cursor: pointer;
overflow: hidden;
}
.gallery .box-container .box img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gallery .box-container .box:hover img {
transform: scale(1.1);
filter: grayscale();
}
.gallery .box-container .box .title {
position: absolute;
top: -10rem;
left: 0;
right: 0;
background: #333;
color: #fff;
text-align: center;
padding-bottom: 1rem;
font-size: 2rem;
}
.gallery .box-container .box:hover .title {
top: 0;
}
.gallery .box-container .box .icons {
position: absolute;
bottom: -10rem;
left: 0;
right: 0;
background: #333;
padding-top: 1rem;
text-align: center;
}
.gallery .box-container .box:hover .icons {
bottom: 0;
}
.gallery .box-container .box .icons a {
font-size: 2rem;
margin: 0.5rem 1rem;
color: #fff;
}
.gallery .box-container .box .icons a:hover {
color: var(--theme-color);
}
.price .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
}
.price .box-container .box {
padding: 2rem 0;
background: #333;
border-radius: 0.5rem;
text-align: center;
}
.price .box-container .box:hover {
transform: scale(1.03);
}
.price .box-container .box .title {
background: var(--theme-color);
color: #fff;
padding: 1.5rem 0;
font-size: 2rem;
}
.price .box-container .box .amount {
color: #fff;
padding-top: 2rem;
font-size: 4rem;
}
.price .box-container .box ul {
list-style-type: none;
padding: 1rem 0;
}
.price .box-container .box ul li {
font-size: 1.5rem;
color: #eee;
padding: 1rem 0;
}
.price .box-container .box ul li i {
color: var(--theme-color);
padding-right: 0.5rem;
}
.reivew .box {
border-radius: 0.5rem;
background: #333;
padding: 2rem;
position: relative;
}
.reivew .box .fa-quote-right {
position: absolute;
top: 2rem;
right: 2rem;
color: var(--theme-color);
font-size: 5rem;
}
.reivew .box .user {
display: flex;
align-items: center;
gap: 1.5rem;
padding-bottom: 1rem;
}
.reivew .box .user img {
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.reivew .box .user h3 {
font-size: 2rem;
color: #fff;
}
.reivew .box .user span {
font-size: 1.5rem;
color: #eee;
}
.reivew .box p {
line-height: 2;
color: #eee;
padding: 0.5rem 0;
font-size: 1.6rem;
}
.contact form {
max-width: 70rem;
margin: 1rem auto;
text-align: center;
}
.contact form .inputBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .inputBox input,
.contact form textarea {
width: 100%;
background: #333;
border-radius: 0.5rem;
padding: 1rem;
margin: 0.7rem 0;
font-size: 1.5rem;
color: #fff;
text-transform: none;
}
.contact form .inputBox input::placeholder,
.contact form textarea::placeholder {
color: #eee;
text-transform: capitalize;
}
.contact form .inputBox input:focus,
.contact form textarea:focus {
background: #444;
}
.contact form .inputBox input {
width: 49%;
}
.contact form textarea {
resize: none;
}
.footer {
background: #111;
}
.footer .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
}
.footer .box-container .box h3 {
font-size: 2.5rem;
padding: 1rem 0;
color: #fff;
}
.footer .box-container .box a {
display: block;
font-size: 1.5rem;
padding: 1rem 0;
color: #eee;
}
.footer .box-container .box a i {
padding-right: 0.5rem;
color: var(--theme-color);
}
.footer .box-container .box a:hover i {
padding-right: 1.5rem;
color: #fff;
}
.footer .credit {
text-align: center;
border-top: 0.1rem solid #222;
color: #fff;
padding: 2rem;
padding-top: 2.5rem;
margin-top: 1rem;
font-size: 2rem;
}
.footer .credit span {
color: var(--theme-color);
}
html::-webkit-scrollbar {
width: 1rem;
}
html::-webkit-scrollbar-track {
background: #444;
}
html::-webkit-scrollbar-thumb {
background: var(--theme-color);
border-radius: 5rem;
}
.theme-toggler {
position: fixed;
top: 10rem;
right: -20rem;
background: #333;
z-index: 1000;
width: 20rem;
text-align: center;
}
.theme-toggler.active {
right: 0;
}
.theme-toggler h3 {
color: #fff;
padding: 1rem 0;
font-size: 2rem;
}
.theme-toggler .buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.theme-toggler .buttons .theme-btn {
height: 5rem;
width: 5rem;
border-radius: 50%;
cursor: pointer;
}
.theme-toggler .toggle-btn {
position: absolute;
top: 0;
left: -5.9rem;
padding: 1.3rem 1.5rem;
background: #333;
cursor: pointer;
}
.theme-toggler .toggle-btn i {
color: #fff;
font-size: 3rem;
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
}
/* media queries */
@media (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
section {
padding: 2rem;
}
}
@media (max-width: 768px) {
#menu-bars {
display: initial;
}
.header .navbar {
position: absolute;
top: 100%;
left: 0;
right: 0;
border-top: 0.1rem solid #222;
background: #333;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header .navbar.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.fa-times {
transform: rotate(180deg);
}
.header .navbar a {
display: flex;
background: #222;
border-radius: 0.5rem;
padding: 1.3rem;
margin: 1.3rem;
font-size: 2rem;
}
.home .content h3 {
font-size: 4rem;
}
}
@media (max-width: 450px) {
html {
font-size: 50%;
}
.home .home-slider .swiper-slide {
width: 27rem;
}
.contact form .inputBox input {
width: 100%;
}
}
Javascript (Script.js)
This is our JavaScript code which adds functionality to our webpage. Let’s understand it.
- First we selects the menu button from the html file so that we can access it.
- Then we add onclick functionality for the navigation menu for smaller screens.
- For the theme-toggler functionality, we access the buttons from the html file.
- Clicking the toggle button shows or hides the theme selection panel by toggling the active class
- Then we adds functionality for auto close menu and theme toggler. In this we ensures that on the scrolling nav menu automatically closes theme panel remove their active classes.
- In the theme color selection part we had add a loop through all theme buttons inside .theme-toggler. When we select any theme color it retrieves background color and apply it as new theme color using CSS variable.
- Using the swiper js we adds swiping functionality to our home page and review page. Both section has auto swiper after some seconds of delay.
This was all about our JavaScript Code.
let menu = document.querySelector("#menu-bars");
let navbar = document.querySelector(".navbar");
menu.onclick = () => {
menu.classList.toggle("fa-times");
navbar.classList.toggle("active");
};
let themeToggler = document.querySelector(".theme-toggler");
let toggleBtn = document.querySelector(".toggle-btn");
toggleBtn.onclick = () => {
themeToggler.classList.toggle("active");
};
window.onscroll = () => {
menu.classList.remove("fa-times");
navbar.classList.remove("active");
themeToggler.classList.remove("active");
};
document.querySelectorAll(".theme-toggler .theme-btn").forEach((btn) => {
btn.onclick = () => {
let color = btn.style.background;
document.querySelector(":root").style.setProperty("--theme-color", color);
};
});
var swiper = new Swiper(".home-slider", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true,
},
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
var swiper = new Swiper(".review-slider", {
slidesPerView: 1,
grabCursor: true,
loop: true,
spaceBetween: 10,
breakpoints: {
0: {
slidesPerView: 1,
},
700: {
slidesPerView: 2,
},
1050: {
slidesPerView: 3,
},
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
});
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
electronics Store website using html CSS and JavaScript Introduction Hello coders, welcome to another new project. As you know our today’s project …
Digital Marketing Agency website Using HTML, CSS and JavaScript Introduction Hello coders, welcome to another new blog. Today in this project we’ll …
Fruit Slicer Game Using HTML CSS And JavaScript Introduction Hey coders, welcome to another new blog. Today in this blog we’ve created …
Event Organizers Website Using Html Css And JavaScript Introduction Hello coders, welcome to another new blog. As you know that our today’s …
Get Huge Discounts
More Python Projects
Get Discount on Top EdTech Compnies
Fruit Slicer Game Using HTML CSS And JavaScript
Introduction
Hey coders, welcome to another new blog. Today in this blog we’ve created a fruit slicer game using HTML CSS and JavaScript. A fruit slicer game is interactive and user engaging game and I believe that developing these type of games surely enhances our coding skills and helps us in UI skills as well.
HTML code sets up the basic structure of our game while CSS adds interactivity to our game. Using CSS we have styled our fruit slicer game. JavaScript controls the functionality of our fruit slicer game.
In this blog you’ll learn that how to create this fruit slicer game. HTML and CSS builds the UI of our game and some interactivity but the functionality of our game like score count and reset game buttons, are all controlled by our JavaScript code. To create this type of game all you need is the knowledge of HTML CSS and JavaScript.
Let’s see the code.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code which sets up the basic structure of our fruit game slicer game. HTML code is use for any webpage to build their basic structure. Using the below code we’ve developed our game’s basic structure.
- <!DOCTYPE html>: This defines the document type of our code file and ensure that our file is a HTML document.
- <title>: sets the title of our webpage as “Fruit Slicer Game.”
- <link>: These tag links external CSS file and jQuery UI CSS file for styling our webpage.
- <body>: This contains the main content of our webpage.
- <div id=”container”>: Acts as a container for the entire content of the page.
- <div id=”instructions”>: Displays the instructions for the game – “Slice Fruits.”
- <div id=”fruitcontainer”>: It contains elements related to the game like scores, left chances, game introduction, and the image of a fruit.
- <div id=”score”>: This section displays player score.
- <div class=”scoreDisplay”>: This contains an image and the score value.
- <div id=”trialsleft”>: This shows how many chances are left.
- <div id=”front”>: Contains a game introduction message and an image of a fruit logo.
- <div id=”startReset”>: Displays a button to start or reset the game.
- <div id=”gameOver”>: This is for the gameover condition.
- <audio id=”slicesound”>: This contains 3 audio files with some id and classes.
- <script>: This links external JavaScript files and links which will maintain the functionality of our game.
<title>CodeWithCurious.com - Fruit Slicer Game</title>
<div id="container">
<div id="instructions">
Slice Fruits
</div>
<div id="fruitcontainer">
<div id="score">
<div class="scoreDisplay">
<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/scr.png" alt="" />
<span id="scoreValue">0</span>
</div>
</div>
<div id="trialsleft"></div>
<div id="front">
Are you ready for the ultimate slice action ? <br />
<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/splash.png" alt="Fruit logo" />
</div>
<img id="fruit1" class="fruit" />
</div>
<div id="startReset">
Start Game
</div>
<!--for game over block-->
<div id="gameOver"></div>
</div>
<!--for audio files-->
<audio id="slicesound">
</audio>
CSS (Style.css)
This is our CSS code which styles our fruit slicer game. This code adds interactivity to our webpage.
- First it sets the entire html document. The html element takes full height of 100%, background properties and font-family property.
- Next, we styled the #container by giving some height and width. #container also take margin, padding, border-radius and a position:relative as well.
- #front sets font size, color, height, width, and some padding. It hides the elements initially and z-index sets as 2.
- #front img takes a width of 280px.
- #instruction sets width 450px and height 50px. It also takes margin, font-size and line height properties. A border radius of 20px, box shadow, background color and color property are also given to the #instruction element.
- #fruitcontainer sets a background image with background size as cover. It sets height, width, margin and padding as well. Background color of this section set as black and text color as white. Text align center with overflow hidden and some box shadow is given to the #fruitcontainer.
- .fruit class sets display as none and position absolute. The #score also sets it display as none.
- .scoreDisplay class sets z index 1 and sets display: flex. A transparent background, position, font size and justify items are set to this section.
- #score img takes width, align items and padding property.
- #trailsleft sets display flex, position absolute, z-index 1,margin, left and a transparent background color.
- Sets positioning, width, padding, margin, cursor style, text alignment, background color, box shadow, border radius, and transition for an element with ID “startReset”.
- #startReset adjust styling for the active state of the element.
- At last we styled the #gameOver. #gameOver Sets box sizing, width, height, background, text color, text transformation to uppercase, text alignment, font size, positioning, and z-index.
html {
height: 100%;
background: radial-gradient(circle, #fff, rgb(189, 182, 182));
background-image: url(https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/bg3%20-%20Copy.jpg);
background-size: cover;
font-family: cursive, sans-serif;
}
#container {
width: 750px;
height: 600px;
margin: 10px auto;
padding: 20px;
border-radius: 10px;
position: relative;
}
#front {
font-size: 40px;
color: #d3901d;
width: 650px;
height: 450px;
padding: 10px;
margin: 30px auto 20px auto;
z-index: 2;
display: none;
}
#front img {
width: 280px;
}
#instructions {
width: 450px;
height: 50px;
margin: 10px auto;
font-size: 30px;
background-color: #d3901d;
color: #2e1d11;
text-align: center;
line-height: 50px;
border-radius: 20px;
box-shadow: 0px 4px 0px 0px #775012;
}
#fruitcontainer {
background: url(https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/wood-bg2.jpg);
background-size: cover;
width: 650px;
height: 450px;
padding: 10px;
margin: 30px auto 20px auto;
background-color: white;
color: black;
text-align: center;
font-family: cursive, sans-serif;
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 4px 0px 0px #4b4b4e;
position: relative;
}
.fruit {
display: none;
position: absolute;
}
#score {
display: none;
}
.scoreDisplay {
z-index: 1;
display: flex;
background-color: transparent;
color: #888e61;
position: absolute;
font-size: 30px;
justify-items: center;
}
#score img {
width: 40px;
align-items: center;
padding-right: 5px;
}
#trialsleft {
margin-top: 7px;
display: flex;
position: absolute;
left: 550px;
background-color: transparent;
z-index: 1;
}
.life {
width: 30px;
padding-right: 5px;
}
#startReset {
position: relative;
width: 90px;
padding: 10px;
margin: 0 auto;
cursor: pointer;
text-align: center;
background-color: #8d8315;
box-shadow: 0px 4px 0px 0px #5c5619;
border-radius: 5px;
transition: all 0.2s;
}
#startReset:active {
background-color: #69620c;
box-shadow: 0px 0px #5c5619;
top: 4px;
color: white;
}
#gameOver {
box-sizing: border-box;
width: 500px;
height: 300px;
background: transparent;
color: #d3901d;
text-transform: upperCase;
text-align: center;
font-size: 3em;
position: absolute;
top: 170px;
left: 150px;
z-index: 2;
}
Javascript (Script.js)
This is our JavaScript code which adds functionality to our fruit slicer game. This code adds logic in our game and make it user interactive. In this code we’ve define some functions which will add the logic and will add the functionality to our fruit slice game.
- First we accessed all the essential html element using DOM and stored them in some variables. These variable are that we will use later in our code.
- Next, when the game start or reset button is clicked, if game is already playing it will reload the page to restart the game. Else it will set the score to zero and resets all the initial game conditions.
- In the fruit slicing conditions, when the mouse hover over a fruit using mouseover event it increases scores, plays sound and a new fruit will come after some delay.
- Next, the addhearts() function displays the remaining chances of user.
- The startAction() function generates a random fruit and position it at top. Then it moves down in steps slowly. If fruit goes out of the frame a chance will be decreased.
- The chooseRandom() function randomly generates a fruit from the fruits array.
- At last stopAction() function stops the fruit movement and hide it when game is
This is how our JavaScript code works.
var playing = false;
var score;
var trialsleft;
var step; //for random steps
var action; //for settime interval
var fruits = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; //for fruits
$(function () {
//click on start or reset button
$("#front").show();
$("#startReset").click(function () {
if (playing == true) {
//if we are playing
location.reload(); //reload page
} else {
//if we are not playing from before
$("#front").hide();
$("#score").show();
playing = true;
//set score to 0
score = 0;
$("#scoreValue").html(score);
//show trials left box
$("#trialsleft").show();
trialsleft = 3;
addhearts();
//hide game over box
$("#gameOver").hide();
//change button to reset game
$("#startReset").html("Reset Game");
//start action
startAction();
}
});
//slice a fruit
$("#fruit1").mouseover(function () {
score++; // increase score
$("#scoreValue").html(score);
//play sound
$("#slicesound")[0].play();
//stop fruit
clearInterval(action);
//hide fruit
$("#fruit1").hide("explode", 500); //slice fruit
//send new fruit
setTimeout(startAction, 500);
});
//functions
//addhearts
function addhearts() {
$("#trialsleft").empty();
for (i = 0; i < trialsleft; i++) {
$("#trialsleft").append(
'<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/wrong.png" class="life">'
);
}
}
//start action
function startAction() {
//generate random fruit
$("#fruit1").show();
//choose random fruit
chooseRandom();
//random position
$("#fruit1").css({
left: Math.round(550 * Math.random()),
top: -50,
});
//generate random step
step = 1 + Math.round(5 * Math.random()); //change steps
//descend fruits down by 10ms
action = setInterval(function () {
//move fruit by one step
$("#fruit1").css("top", $("#fruit1").position().top + step);
//check if the fruit is too low
if ($("#fruit1").position().top > $("#fruitcontainer").height() - 50) {
//yes it is low
// check trails left
if (trialsleft > 1) {
//generate a fruit
$("#fruit1").show();
//choose random fruit
chooseRandom();
//random position
$("#fruit1").css({
left: Math.round(550 * Math.random()),
top: -50,
});
//generate random step
step = 1 + Math.round(5 * Math.random()); //change steps
//reduce trials by one
trialsleft--;
//populate trails left box by one
addhearts();
} else {
//game over
playing = false; //we are ot playing any more
$("#score").hide();
$("#startreset").html("Start Game");
$("#gameOver").show();
$("#gameOver").html(
"<p>Game Over!</p><p>Your score is " + score + "</p>"
);
$("#trialsleft").hide();
stopAction(); //stops Action
}
}
}, 10);
}
//choose random fruits
function chooseRandom() {
$("#fruit1").attr(
"src",
"https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/" +
fruits[Math.round(9 * Math.random())] +
".png"
);
}
// Stop Action
function stopAction() {
clearInterval(action);
$("#fruit1").hide();
}
});
/* Styles for the container */
.download-container {
font-family: Arial, sans-serif;
text-align: center; /* Center the content horizontally */
}
.timer-container {
font-size: 24px;
}
.red-circle {
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid red;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: red;
font-weight: bold;
}
.start-button {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
.start-button:hover {
background-color: #45a049;
}
.downloading-message {
font-size: 18px;
margin-top: 20px;
display: none;
}
const startButton = document.querySelector('.start-button');
const timerContainer = document.querySelector('.timer-container');
const downloadingMessage = document.querySelector('.downloading-message');
let timer, countdown, isPaused = false;
startButton.addEventListener('click', function () {
// Open the new webpage with "dofollow" when the button is clicked
window.open('https://codewithcurious.com/getsmarter-promo-code/', '_blank', 'noopener,noreferrer'); // Replace with desired URL
countdown = 25; // Set countdown to 100 seconds
startButton.style.display = 'none'; // Hide the button when clicked
timerContainer.innerHTML = `Your download will begin in ${countdown} seconds.`;
startTimer(); // Start the countdown
// Listen for tab visibility change
document.addEventListener('visibilitychange', handleVisibilityChange);
});
function startTimer() {
timer = setInterval(function () {
if (!isPaused && countdown > 0) {
countdown--;
timerContainer.innerHTML = `Your download will begin in ${countdown} seconds.`;
if (countdown === 0) {
clearInterval(timer);
timerContainer.innerHTML = ''; // Clear the timer message
downloadingMessage.style.display = 'block'; // Show the downloading message
// Open the download link with "nofollow" after the timer ends
window.open('https://downgit.github.io/#/home?url=https://github.com/he-is-talha/html-css-javascript-games/tree/main/12-Type-Number-Guessing-Game', '_blank', 'nofollow');
// Show the button again after redirection
setTimeout(function() {
startButton.style.display = 'inline-block'; // Show the button again
downloadingMessage.style.display = 'none'; // Hide the downloading message
}, 2000); // Delay of 2 seconds before showing the button again
}
}
}, 1000); // Decrease by 1 every second
}
function handleVisibilityChange() {
if (document.hidden) {
clearInterval(timer); // Pause the timer if the tab is hidden
isPaused = true;
} else {
isPaused = false; // Resume the timer when the tab becomes visible
startTimer(); // Start the timer again
}
}
Your download is starting now...
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
electronics Store website using html CSS and JavaScript Introduction Hello coders, welcome to another new project. As you know our today’s project …
Digital Marketing Agency website Using HTML, CSS and JavaScript Introduction Hello coders, welcome to another new blog. Today in this project we’ll …
Fruit Slicer Game Using HTML CSS And JavaScript Introduction Hey coders, welcome to another new blog. Today in this blog we’ve created …
Event Organizers Website Using Html Css And JavaScript Introduction Hello coders, welcome to another new blog. As you know that our today’s …
Get Huge Discounts
More Python Projects
Get Discount on Top EdTech Compnies
Fruit Slicer Game Using HTML CSS And JavaScript
Introduction
Hey coders, welcome to another new blog. Today in this blog we’ve created a fruit slicer game using HTML CSS and JavaScript. A fruit slicer game is interactive and user engaging game and I believe that developing these type of games surely enhances our coding skills and helps us in UI skills as well.
HTML code sets up the basic structure of our game while CSS adds interactivity to our game. Using CSS we have styled our fruit slicer game. JavaScript controls the functionality of our fruit slicer game.
In this blog you’ll learn that how to create this fruit slicer game. HTML and CSS builds the UI of our game and some interactivity but the functionality of our game like score count and reset game buttons, are all controlled by our JavaScript code. To create this type of game all you need is the knowledge of HTML CSS and JavaScript.
Let’s see the code.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code which sets up the basic structure of our fruit game slicer game. HTML code is use for any webpage to build their basic structure. Using the below code we’ve developed our game’s basic structure.
- <!DOCTYPE html>: This defines the document type of our code file and ensure that our file is a HTML document.
- <title>: sets the title of our webpage as “Fruit Slicer Game.”
- <link>: These tag links external CSS file and jQuery UI CSS file for styling our webpage.
- <body>: This contains the main content of our webpage.
- <div id=”container”>: Acts as a container for the entire content of the page.
- <div id=”instructions”>: Displays the instructions for the game – “Slice Fruits.”
- <div id=”fruitcontainer”>: It contains elements related to the game like scores, left chances, game introduction, and the image of a fruit.
- <div id=”score”>: This section displays player score.
- <div class=”scoreDisplay”>: This contains an image and the score value.
- <div id=”trialsleft”>: This shows how many chances are left.
- <div id=”front”>: Contains a game introduction message and an image of a fruit logo.
- <div id=”startReset”>: Displays a button to start or reset the game.
- <div id=”gameOver”>: This is for the gameover condition.
- <audio id=”slicesound”>: This contains 3 audio files with some id and classes.
- <script>: This links external JavaScript files and links which will maintain the functionality of our game.
<title>CodeWithCurious.com - Fruit Slicer Game</title>
<div id="container">
<div id="instructions">
Slice Fruits
</div>
<div id="fruitcontainer">
<div id="score">
<div class="scoreDisplay">
<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/scr.png" alt="" />
<span id="scoreValue">0</span>
</div>
</div>
<div id="trialsleft"></div>
<div id="front">
Are you ready for the ultimate slice action ? <br />
<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/splash.png" alt="Fruit logo" />
</div>
<img id="fruit1" class="fruit" />
</div>
<div id="startReset">
Start Game
</div>
<!--for game over block-->
<div id="gameOver"></div>
</div>
<!--for audio files-->
<audio id="slicesound">
</audio>
CSS (Style.css)
This is our CSS code which styles our fruit slicer game. This code adds interactivity to our webpage.
- First it sets the entire html document. The html element takes full height of 100%, background properties and font-family property.
- Next, we styled the #container by giving some height and width. #container also take margin, padding, border-radius and a position:relative as well.
- #front sets font size, color, height, width, and some padding. It hides the elements initially and z-index sets as 2.
- #front img takes a width of 280px.
- #instruction sets width 450px and height 50px. It also takes margin, font-size and line height properties. A border radius of 20px, box shadow, background color and color property are also given to the #instruction element.
- #fruitcontainer sets a background image with background size as cover. It sets height, width, margin and padding as well. Background color of this section set as black and text color as white. Text align center with overflow hidden and some box shadow is given to the #fruitcontainer.
- .fruit class sets display as none and position absolute. The #score also sets it display as none.
- .scoreDisplay class sets z index 1 and sets display: flex. A transparent background, position, font size and justify items are set to this section.
- #score img takes width, align items and padding property.
- #trailsleft sets display flex, position absolute, z-index 1,margin, left and a transparent background color.
- Sets positioning, width, padding, margin, cursor style, text alignment, background color, box shadow, border radius, and transition for an element with ID “startReset”.
- #startReset adjust styling for the active state of the element.
- At last we styled the #gameOver. #gameOver Sets box sizing, width, height, background, text color, text transformation to uppercase, text alignment, font size, positioning, and z-index.
html {
height: 100%;
background: radial-gradient(circle, #fff, rgb(189, 182, 182));
background-image: url(https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/bg3%20-%20Copy.jpg);
background-size: cover;
font-family: cursive, sans-serif;
}
#container {
width: 750px;
height: 600px;
margin: 10px auto;
padding: 20px;
border-radius: 10px;
position: relative;
}
#front {
font-size: 40px;
color: #d3901d;
width: 650px;
height: 450px;
padding: 10px;
margin: 30px auto 20px auto;
z-index: 2;
display: none;
}
#front img {
width: 280px;
}
#instructions {
width: 450px;
height: 50px;
margin: 10px auto;
font-size: 30px;
background-color: #d3901d;
color: #2e1d11;
text-align: center;
line-height: 50px;
border-radius: 20px;
box-shadow: 0px 4px 0px 0px #775012;
}
#fruitcontainer {
background: url(https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/wood-bg2.jpg);
background-size: cover;
width: 650px;
height: 450px;
padding: 10px;
margin: 30px auto 20px auto;
background-color: white;
color: black;
text-align: center;
font-family: cursive, sans-serif;
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 4px 0px 0px #4b4b4e;
position: relative;
}
.fruit {
display: none;
position: absolute;
}
#score {
display: none;
}
.scoreDisplay {
z-index: 1;
display: flex;
background-color: transparent;
color: #888e61;
position: absolute;
font-size: 30px;
justify-items: center;
}
#score img {
width: 40px;
align-items: center;
padding-right: 5px;
}
#trialsleft {
margin-top: 7px;
display: flex;
position: absolute;
left: 550px;
background-color: transparent;
z-index: 1;
}
.life {
width: 30px;
padding-right: 5px;
}
#startReset {
position: relative;
width: 90px;
padding: 10px;
margin: 0 auto;
cursor: pointer;
text-align: center;
background-color: #8d8315;
box-shadow: 0px 4px 0px 0px #5c5619;
border-radius: 5px;
transition: all 0.2s;
}
#startReset:active {
background-color: #69620c;
box-shadow: 0px 0px #5c5619;
top: 4px;
color: white;
}
#gameOver {
box-sizing: border-box;
width: 500px;
height: 300px;
background: transparent;
color: #d3901d;
text-transform: upperCase;
text-align: center;
font-size: 3em;
position: absolute;
top: 170px;
left: 150px;
z-index: 2;
}
Javascript (Script.js)
This is our JavaScript code which adds functionality to our fruit slicer game. This code adds logic in our game and make it user interactive. In this code we’ve define some functions which will add the logic and will add the functionality to our fruit slice game.
- First we accessed all the essential html element using DOM and stored them in some variables. These variable are that we will use later in our code.
- Next, when the game start or reset button is clicked, if game is already playing it will reload the page to restart the game. Else it will set the score to zero and resets all the initial game conditions.
- In the fruit slicing conditions, when the mouse hover over a fruit using mouseover event it increases scores, plays sound and a new fruit will come after some delay.
- Next, the addhearts() function displays the remaining chances of user.
- The startAction() function generates a random fruit and position it at top. Then it moves down in steps slowly. If fruit goes out of the frame a chance will be decreased.
- The chooseRandom() function randomly generates a fruit from the fruits array.
- At last stopAction() function stops the fruit movement and hide it when game is
This is how our JavaScript code works.
var playing = false;
var score;
var trialsleft;
var step; //for random steps
var action; //for settime interval
var fruits = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; //for fruits
$(function () {
//click on start or reset button
$("#front").show();
$("#startReset").click(function () {
if (playing == true) {
//if we are playing
location.reload(); //reload page
} else {
//if we are not playing from before
$("#front").hide();
$("#score").show();
playing = true;
//set score to 0
score = 0;
$("#scoreValue").html(score);
//show trials left box
$("#trialsleft").show();
trialsleft = 3;
addhearts();
//hide game over box
$("#gameOver").hide();
//change button to reset game
$("#startReset").html("Reset Game");
//start action
startAction();
}
});
//slice a fruit
$("#fruit1").mouseover(function () {
score++; // increase score
$("#scoreValue").html(score);
//play sound
$("#slicesound")[0].play();
//stop fruit
clearInterval(action);
//hide fruit
$("#fruit1").hide("explode", 500); //slice fruit
//send new fruit
setTimeout(startAction, 500);
});
//functions
//addhearts
function addhearts() {
$("#trialsleft").empty();
for (i = 0; i < trialsleft; i++) {
$("#trialsleft").append(
'<img decoding="async" src="https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/wrong.png" class="life">'
);
}
}
//start action
function startAction() {
//generate random fruit
$("#fruit1").show();
//choose random fruit
chooseRandom();
//random position
$("#fruit1").css({
left: Math.round(550 * Math.random()),
top: -50,
});
//generate random step
step = 1 + Math.round(5 * Math.random()); //change steps
//descend fruits down by 10ms
action = setInterval(function () {
//move fruit by one step
$("#fruit1").css("top", $("#fruit1").position().top + step);
//check if the fruit is too low
if ($("#fruit1").position().top > $("#fruitcontainer").height() - 50) {
//yes it is low
// check trails left
if (trialsleft > 1) {
//generate a fruit
$("#fruit1").show();
//choose random fruit
chooseRandom();
//random position
$("#fruit1").css({
left: Math.round(550 * Math.random()),
top: -50,
});
//generate random step
step = 1 + Math.round(5 * Math.random()); //change steps
//reduce trials by one
trialsleft--;
//populate trails left box by one
addhearts();
} else {
//game over
playing = false; //we are ot playing any more
$("#score").hide();
$("#startreset").html("Start Game");
$("#gameOver").show();
$("#gameOver").html(
"<p>Game Over!</p><p>Your score is " + score + "</p>"
);
$("#trialsleft").hide();
stopAction(); //stops Action
}
}
}, 10);
}
//choose random fruits
function chooseRandom() {
$("#fruit1").attr(
"src",
"https://raw.githubusercontent.com/Saumya-07/Fruit-Slicer/master/images/" +
fruits[Math.round(9 * Math.random())] +
".png"
);
}
// Stop Action
function stopAction() {
clearInterval(action);
$("#fruit1").hide();
}
});
/* Styles for the container */
.download-container {
font-family: Arial, sans-serif;
text-align: center; /* Center the content horizontally */
}
.timer-container {
font-size: 24px;
}
.red-circle {
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid red;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: red;
font-weight: bold;
}
.start-button {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
.start-button:hover {
background-color: #45a049;
}
.downloading-message {
font-size: 18px;
margin-top: 20px;
display: none;
}
const startButton = document.querySelector('.start-button');
const timerContainer = document.querySelector('.timer-container');
const downloadingMessage = document.querySelector('.downloading-message');
let timer, countdown, isPaused = false;
startButton.addEventListener('click', function () {
// Open the new webpage with "dofollow" when the button is clicked
window.open('https://codewithcurious.com/getsmarter-promo-code/', '_blank', 'noopener,noreferrer'); // Replace with desired URL
countdown = 25; // Set countdown to 100 seconds
startButton.style.display = 'none'; // Hide the button when clicked
timerContainer.innerHTML = `Your download will begin in ${countdown} seconds.`;
startTimer(); // Start the countdown
// Listen for tab visibility change
document.addEventListener('visibilitychange', handleVisibilityChange);
});
function startTimer() {
timer = setInterval(function () {
if (!isPaused && countdown > 0) {
countdown--;
timerContainer.innerHTML = `Your download will begin in ${countdown} seconds.`;
if (countdown === 0) {
clearInterval(timer);
timerContainer.innerHTML = ''; // Clear the timer message
downloadingMessage.style.display = 'block'; // Show the downloading message
// Open the download link with "nofollow" after the timer ends
window.open('https://downgit.github.io/#/home?url=https://github.com/he-is-talha/html-css-javascript-games/tree/main/12-Type-Number-Guessing-Game', '_blank', 'nofollow');
// Show the button again after redirection
setTimeout(function() {
startButton.style.display = 'inline-block'; // Show the button again
downloadingMessage.style.display = 'none'; // Hide the downloading message
}, 2000); // Delay of 2 seconds before showing the button again
}
}
}, 1000); // Decrease by 1 every second
}
function handleVisibilityChange() {
if (document.hidden) {
clearInterval(timer); // Pause the timer if the tab is hidden
isPaused = true;
} else {
isPaused = false; // Resume the timer when the tab becomes visible
startTimer(); // Start the timer again
}
}
Your download is starting now...
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
electronics Store website using html CSS and JavaScript Introduction Hello coders, welcome to another new project. As you know our today’s project …
Digital Marketing Agency website Using HTML, CSS and JavaScript Introduction Hello coders, welcome to another new blog. Today in this project we’ll …
Fruit Slicer Game Using HTML CSS And JavaScript Introduction Hey coders, welcome to another new blog. Today in this blog we’ve created …
Event Organizers Website Using Html Css And JavaScript Introduction Hello coders, welcome to another new blog. As you know that our today’s …
Get Huge Discounts
More Python Projects
