php - Trying to reduce repetition of HTML code using JavaScript
Hello I have been working on a project lately where I have a slider with various elements in it and when clicking on the button 'Learn more' on a particular slider element will open a pop-up modal contain specific details to that selected slider element. Now my slider is becoming really long and I am having numerous slides and modal. The only element that is shared between my slide and modal are the title and the image location and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:
<!-- Slides 1 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
</div>
<div class="card_info">
<h3 class="card_title">1. Teamwork</h3>
<p>
The ability to work well in a team. This shows that you have the maturity to realise that no work is standalone
</p>
<button data-modal-target="#modal1" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<!-- Slides 2 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
</div>
<div class="card_info">
<h3 class="card_title">2. Decision Making</h3>
<p>
Decision making is the process of making choices by identifying a decision, and assessing alternative resolutions.
</p>
<button data-modal-target="#modal2" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
In my code I have numerous slides and when clicking on the button Learn More should open another code which repeat itself as follows:
<!-- Modal 1 -->
<div class="modal" id="modal1">
<div class="modal_header">
<div class="modal_image">
<img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title">1. Teamwork</h3>
<div class="modal_para">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
<!-- Modal 2 -->
<div class="modal" id="modal2">
<div class="modal_header">
<div class="modal_image">
<img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title">2. Decision Making</h3>
<div class="modal_para">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
My question for that is: Is there a way for me to continue add other slides and modal in a way that would reduce the repeated HTML pattern in JavaScript or PHP while keeping the integrity of my code ? Each element in the slider are different a open a respective modal pop-up they only share the same image location and title. The text however is not shared between the slide and modal and I was wondering if any code in JavaScript will help me having a cleaner code as my project slider is increasing
Answer
Solution:
If you are using php you can just use an array of arrays and loop through it to create your slides:
<?php
$myslides = array(
array(
'id' => 1,
'title' => 'First slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 2,
'title' => 'Second slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 3,
'title' => 'third slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
array(
'id' => 4,
'title' => 'Fourth slide',
'content' => 'somthing to say',
'imgUrl' => 'http://myimageslink.com/img.png'
),
//More arrays means more slides
);
?>
then loop array to get your slides :
<?php
foreach($myslides as $slide) :
?>
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="<?= $slide['imgUrl']; ?>">
</div>
<div class="card_info">
<h3 class="card_title"><?= $slide['title']; ?></h3>
<p>
<?= $slide['content']; ?>
</p>
<button data-modal-target="#modal<?= $slide['id']; ?>" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<?php
endforeach;
?>
and don't forget to loop also through your model the same loop with different html
<?php
foreach($myslides as $slide) :
?>
<div class="modal" id="modal<?= $slide['id']; ?>">
<div class="modal_header">
<div class="modal_image">
<img src="<?= $slide['imgUrl']; ?>">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title"><?= $slide['title']; ?></h3>
<div class="modal_para">
<p>
<?= $slide['content']; ?>
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
<?php
endforeach;
?>
PS: Php is good for rendrering html, but better keep it for other server side tasks, you may consider learning ReactJS to handle complicated frontEnd tasks
Source