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.

Sign up for GitHub

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

Jump to bottom

resolve conflict #5

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

resolve conflict #5

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9350a65
add streetdog rescue
sskaaaaaa Aug 11, 2023
30ed7b9
finished streetdog rescue
sskaaaaaa Aug 11, 2023
6ce2db5
resolve conflict
sskaaaaaa Aug 11, 2023
83e0da9
modify index.html
sskaaaaaa Aug 11, 2023
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
142 changes: 129 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,133 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Kitty Rescue</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main>
<h1>Streetcat Rescue</h1>
<div>
<img id="cat" src="https://placekitten.com/64/64" alt="kitten"/>
</div>
<div id="cat-counter">Cat Clicks: 0</div>
<input class="happy" type="text" name="amount" id="amount" placeholder="Any amount helps!"/>
<button class="happy" id="btn">We appreciate your donation!</button>
</main>
<script src="script.js"></script>
</body>
<style>
body {
background: #28debd;
font-family: sans-serif;
color: #daae6d;
display: grid;
place-items: center;
}
main {
width: 35vw;
background: #005678;
padding: 5px;
text-align: center;
}
button {
background: #585a91;
padding: 8px 20px;
margin: 20px;
rotate: -5deg;
transition: all 0.3s;
}
.happy {
color: #f31414;
border-color: lightpink;
border-radius: 3px;
margin-top: 10px;
}
input {
margin: 10px;
}

div {
padding: 15px;
background: #dcccdc;
display: grid;
place-items: center;
}
img:hover {
rotate: -10deg;
}

main:hover button {
rotate: 5deg;
}
section {background: rgb(22, 41, 161); height:150px; width:100%; text-align:center;}

#imgsize {width: 300px; height: 200px;}

.bow_wow {color: white; border-color:antiquewhite; }

</style>
</head>
<body>
<main>
<h1>Streetcat Rescue</h1>
<div>
<img id="cat" src="https://placekitten.com/64/64" alt="kitten" />
</div>
<input
class="happy"
type="text"
name="amount"
id="amount"
placeholder="Any amount helps!"
/>
<button class="happy" id="btn">We appreciate your donation!</button>
</main>
<br><br>
<section>
<h1> Streetdog Rescue </h1>
<div>
<img id="imgsize" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Street_dog_in_pune01.jpg" alt="street dog">
</div>
<input type="text" name="amountDog" id="amountDog" placeholder="&#128021;">
<button class="bow_wow" id="btntwo">bow-wow</button>
</section>

<script>
const button = document.getElementById('btn');
const input = document.getElementById('amount');
const cat = document.getElementById('cat');
const buttonDog = document.getElementById('btntwo');
const inputDog = document.getElementById('amountDog');

function handleDonation() {
const amount = input.value;

if (amount == 0) {
alert('Thanks for nothing, the cats are all sad :(');
document.body.style.background = 'red';
} else {
alert(`Thanks for the donation of $ ${amount}!`);
}
}

function catClick() {
document.body.style.background = 'pink';
}

function handleDonationdog() {
const amountDog = inputDog.value;

if (amountDog ==0) {
alert('Woof Woof');

document.querySelector('section').style.background = 'black';
} else {
alert(`Thanks for the donation of $ ${amountDog}!`);
}
}

btntwo.addEventListener('click', handleDonationdog);
btn.addEventListener('click', handleDonation);
cat.addEventListener('click', catClick);
// catClick();
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<main>
<h1>Streetcat Rescue</h1>
<div>
<img id="cat" src="https://placekitten.com/64/64" alt="kitten"/>
</div>
<div id="cat-counter">Cat Clicks: 0</div>
<input class="happy" type="text" name="amount" id="amount" placeholder="Any amount helps!"/>
<button class="happy" id="btn">We appreciate your donation!</button>
</main>
<script src="script.js"></script>
</body>

</html>