Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My commit to AutomobileGallery website #5

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,16 @@
# AutomobileGallery
Simple Responsive Blog

Create a loading animation :
1. Adding a Spinner-Wrapper file into it
2. Adding a CSS code of spinner
3. Linking a Script.js file into it
4. performin a Js oppertions

Creating a creative popups :
1. Adding a popup HTML file to "Click through" button and "Launch" button in index.html file
2. Adding a popup CSS file into main.css file
3. Adding a popup JS file into script.js file

Creating a functional addons :
1. Adding javascript API into js file but you have to specify the browser wanted.
54 changes: 52 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,50 @@ <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Let the
</h1>
<p class="mb-8 leading-relaxed">The speed of light isn't enough to bridge the emotions that light up in the mist of talents , the fire in the engines and the sound of wheels are enough to drive the audience crazy in the thunder of the destiny</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">CLick through </button>
<button class="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">Launch</button>

<button data-modal-target="#modal" class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">CLick through </button>

<!--Adding a popup HTML file to Click through button -->

<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Click through</div>
<button data-close-button class="close-button">&times;</button>
</div>
<div class="modal-body">
“A car has lots of decisions, not just going forward and backward,” Platzer says. “You can always
steer left and right, or steer left and right a little bit or a lot. There are other cars around,
and then there are pedestrians, and all of a sudden the traffic light changes to red and all these
other things.” <br><br> Click Launch button for more..
</div>
</div>
<div id="overlay"></div>




<button data-modal-target="#modal2" class="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">Launch</button>


<!-- Adding a popup HTML file to Launch button -->

<div class="modal" id="modal2">
<div class="modal-header">
<div class="title">Ready to Launch</div>
<button data-close-button class="close-button">&times;</button>
</div>
<div class="modal-body">
Drag racing, a contest between two cars beginning from a complete stop over a distance of a 1/4 mile (1320 feet)
depends heavily on first 60 feet of the race, or the launch. The technique used for launching varies greatly
depending on the how the car is equipped. The type of transmission, which wheels are being driven, tires, power,
suspension and track preparation all play key roles in how to go about getting the best launch possible from the car.
<br><br> Are you sure you want to Launch.. <br><br> <a href="#">Click here...</a>
</div>
</div>
<div id="overlay"></div>



</div>
</div>
</div>
Expand Down Expand Up @@ -155,6 +197,14 @@ <h2 class="title-font font-medium text-3xl text-white">463</h2>
</div>
</section>

<!-- Adding a Spinner-Wrapper file into it-->

<div class="spinner-wrapper">
<div class="spinner"></div>
</div>

<!-- Linking a Script.js file into it-->

<script src="script.js"></script>
</body>
</html>
117 changes: 116 additions & 1 deletion main.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,119 @@
.body{
background-image: url(./images/geometric-abstract.gif);
background-repeat: repeat;
}
}

/* Adding a CSS code of spinner*/

.spinner-wrapper{
width: 100%;
height: 100%;
background-color: #151515;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}

.spinner {
position: relative;
width: 8rem;
height: 8rem;
border-radius: 50%;
}

.spinner::before,
.spinner:after{
content: "";
position: absolute;
border-radius: 50%;
}

.spinner:before {
width: 100%;
height: 100%;
background-image:linear-gradient(90deg, #ff00cc 0%,#333399 100% );
animation: spin .5s infinite linear;
}
.spinner:after {
width: 90%;
height: 90%;
background-color: #151515;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@keyframes spin {
to {
transform: rotate(360deg);
}

}


/* Adding a CSS code to create a popup */

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
}

.modal.active {
transform: translate(-50%, -50%) scale(1);
}

.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}

.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}

.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}

.modal-body {
padding: 10px 15px;
}

#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}

#overlay.active {
opacity: 1;
pointer-events: all;
}
53 changes: 53 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
let spinnerwrapper = document.querySelector('.spinner-wrapper');

window.addEventListener ('load', function () {
spinnerwrapper.parentElement.removeChild(spinnerwrapper);
});

// Adding a popup script file to js

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})

overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal.active')
modals.forEach(modal => {
closeModal(modal)
})
})

closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal')
closeModal(modal)
})
})

function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}

function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}


// Adding javascript API into js file but specify the browser wanted

function logTabs(tabs) {
console.log(tabs)
}

browser.tabs.query({currentWindow: true}, logTabs)