Я хочу объяснить, как я создал это простое приложение на https://www.appivapp.com. Это приложение-генератор упражнений, с помощью которого вы можете начать тренироваться, терять калории и наращивать мышцы, используя только собственный вес. Это отличное простое приложение, в котором вы также можете отслеживать свои результаты в файле Excel или аналогичном с числами.
Прежде всего, я хочу написать код для HTML
<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <header> <h1>Your Daily Bodyweight Exercise Recommender</h1> </header> <main> <h2>Generate Full-Body Daily Workout Exercise</h2> <a class="waves-effect waves-light purple accent-4 btn" id="btn">Generate</a> </main> <section > <h2>Cycle of 3 or more!</h2> <div id="generated-exercises"> </div> </section> <section id="bottom-section"> <article> <h3>Tips</h3> ... </article> <br><br> ... <br><br> </section> <footer> © 2020 Appiva-Tech </footer> <script src="script.js"></script> </body> </html>
Как вы можете видеть здесь, мы создаем предварительные загрузки и другие вещи, связанные с SEO, на стороне заголовка, для контента я написал необходимый контент для страницы между тегами ‹article› ‹/article›, а затем я создаю скрипты.
Это элементы размещения DOM, которые нужно изменить.
const btn = document.getElementById('btn')
var exerciseTemplate = document.getElementById('generated-exercises')
Затем я создал объект, файл JSON для использования
const exercises = {
"Chest":[
{
"name":"Standard Push-Up",
"image":"https://thumbs.gfycat.com/GlossySkinnyDuckbillcat-max-1mb.gif",
"description":"The push-up is a staple upper-body exercise that you can do anywhere—you just need your bodyweight. ... Then, you'll press your body upward—think about pushing away the floor—and keep your core tight. When your elbows are fully extended, and your body is back in a high plank position, you've completed your rep"
},
{
"name":"Wide-Grip Push-Up",
"image":"https://potamilo.com/wp-content/uploads/2021/05/1-1.gif",
"description":"Start in a plank position but with your hands out wider than your shoulders. Begin to lower your body by bending your elbows, keeping your core tight and your back flat, until your chest grazes the floor. Elbows will flare more than in a standard pushup. Immediately extend your elbows and push your body back up."
},
and goes on...
Это функция, которую я использую для создания упражнений
function setExercises(){
exerciseTemplate.innerHTML = ""
let chestElement = exercises.Chest[Math.floor(Math.random() * exercises.Chest.length)]
let backElement = exercises.Back[Math.floor(Math.random() * exercises.Back.length)]
let armsElement = exercises.Arms[Math.floor(Math.random() * exercises.Arms.length)]
let abdominalsElement = exercises.Abdominals[Math.floor(Math.random() * exercises.Abdominals.length)]
let legsElement = exercises.Legs[Math.floor(Math.random() * exercises.Legs.length)]
let shouldersElement = exercises.Shoulders[Math.floor(Math.random() * exercises.Shoulders.length)]
let bodyweightList = [chestElement,backElement,armsElement,abdominalsElement,legsElement,shouldersElement]
exerciseTemplate.innerHTML += "<hr>"
for(let i=0;i<bodyweightList.length;i++){
exerciseTemplate.innerHTML += "<h3 class='exercises-title'> Selected " + Object.keys(exercises)[i] + " Exercise" + "</h3>"
if(typeof bodyweightList[i] !== 'undefined'){
exerciseTemplate.innerHTML += `
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="${bodyweightList[i].image}">
<span class="card-title">${bodyweightList[i].name}</span>
</div>
<div class="card-content">
<p>${bodyweightList[i].description}</p>
</div>
</div>
</div>
`
}
if(i === bodyweightList.length - 1){
exerciseTemplate.innerHTML += "<br><br>"
}else{
exerciseTemplate.innerHTML += "<hr>"
}
}
}
btn.addEventListener('click',(e) =>{
e.preventDefault()
console.log("hahhaha")
setExercises()
})
и, наконец, я использую DOM, управляющий элементами HTML, который является кнопкой для создания этой функции.
btn.addEventListener('click',(e) =>{
e.preventDefault()
setExercises()
})
это зависит только от данных, поэтому написать это приложение было не так уж сложно. Вы также можете создавать похожие типы приложений-генераторов для повторяющихся вещей.
Вот ссылка на приложение ==›
Для получения дополнительных приложений вы можете посетить веб-сайт
Спасибо за прочтение
