Tag: interactive

  • Coding with JavaScript

    Coding with JavaScript

    [fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Introduction to JavaScript

    JavaScript is a powerful programming language used to make web pages interactive and dynamic. Unlike HTML and CSS, which control the structure and styling of a webpage, JavaScript allows for real-time changes and interactions on a page. This includes responding to user inputs, updating content dynamically, creating animations, handling multimedia, and much more. It’s the backbone of modern web development, enabling developers to create rich, engaging user experiences.


    Basics of JavaScript

    JavaScript is versatile and relatively easy to learn, making it an excellent starting point for new programmers. Its syntax is similar to other programming languages and consists of statements that perform actions, such as displaying a message or making a calculation. Variables in JavaScript allow you to store and manage data, and the language supports several data types, including numbers, strings, booleans, objects, and arrays. This flexibility makes JavaScript a great tool for solving a wide range of problems in web development.

    Functions are another essential feature of JavaScript. They allow you to group related statements into reusable blocks of code. This not only simplifies your programs but also makes them more modular and easier to maintain. Control structures like if-else statements and loops let you make decisions and repeat actions, adding logic and flow to your applications.


    Integrating JavaScript with HTML

    JavaScript works hand-in-hand with HTML and CSS. It is embedded directly into HTML using the <script> tag, which tells the browser to execute the enclosed JavaScript code. This integration allows JavaScript to interact with and manipulate the Document Object Model (DOM), the structure of a webpage. For example, you can use JavaScript to dynamically change the text of a paragraph, hide or show elements, or create complex animations. This capability is what enables the creation of dynamic and interactive web pages.


    Real-World Applications

    One practical example of JavaScript in action is creating a password protection system for a webpage. With JavaScript, you can prompt the user to enter a password and verify whether it matches a predefined value. If the password is correct, the user is granted access; otherwise, they are denied. Such applications, while simple, illustrate JavaScript’s ability to interact with users and make decisions based on their input. As you become more comfortable with the language, you can extend this concept to include advanced features like encrypted passwords or multiple authentication attempts.


    Learning and Practice

    Mastering JavaScript requires hands-on practice. Start by experimenting with basic concepts like variables, functions, and loops. Gradually move on to DOM manipulation and creating small interactive elements, such as buttons or forms. There are countless online resources, tutorials, and projects that can help you deepen your understanding of JavaScript. The more you practice, the more you’ll uncover the language’s capabilities and learn to use it effectively to solve complex problems and enhance user experiences.


    Lesson: Introduction to JavaScript

    JavaScript enables you to create dynamic and interactive web pages. Let’s explore its basics and build progressively toward creating a secure password functionality.


    1. Basics of JavaScript

    Syntax

    • JavaScript uses statements to instruct the browser to perform actions. Each statement ends with a semicolon ;.

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]Y29uc29sZS5sb2coJ0hlbGxvLCB3b3JsZCEnKTs=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Variables

    • Variables store data and can be created using let, const, or var.

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]bGV0IG1lc3NhZ2UgPSAnSGVsbG8sIEphdmFTY3JpcHQhJzsKY29uc29sZS5sb2cobWVzc2FnZSk7[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Data Types

    JavaScript supports:

    1. String: "Hello, World!"
    2. Number: 42, 3.14
    3. Boolean: true, false
    4. Object: { name: "Alice", age: 25 }
    5. Array: [1, 2, 3]
    6. Function: function greet() {}

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]bGV0IHBlcnNvbiA9IHsgbmFtZTogIkFsaWNlIiwgYWdlOiAyNSB9Owpjb25zb2xlLmxvZyhwZXJzb24ubmFtZSk7[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Functions

    Reusable blocks of code defined using the function keyword.

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]ZnVuY3Rpb24gZ3JlZXQobmFtZSkgewogIGNvbnNvbGUubG9nKCdIZWxsbywgJyArIG5hbWUpOwp9CmdyZWV0KCdBbGljZScpOw==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Control Structures

    1. If-Else Statement:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]bGV0IHRpbWUgPSAxMDsKaWYgKHRpbWUgPCAxMikgewogIGNvbnNvbGUubG9nKCdHb29kIG1vcm5pbmcnKTsKfSBlbHNlIHsKICBjb25zb2xlLmxvZygnR29vZCBhZnRlcm5vb24nKTsKfQ==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    For Loop:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]Zm9yIChsZXQgaSA9IDA7IGkgPCAzOyBpKyspIHsKICBjb25zb2xlLmxvZygnU3RlcCAnICsgaSk7Cn0=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    2. Document Object Model (DOM)

    The DOM allows JavaScript to interact with HTML content dynamically.

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”javascript” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RlbW8nKS5pbm5lclRleHQgPSAnSGVsbG8sIERPTSEnOw==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    3. Adding JavaScript to HTML

    To include JavaScript in an HTML document, use the < script > tag.

    Example:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDx0aXRsZT5KYXZhU2NyaXB0IEV4YW1wbGU8L3RpdGxlPgo8IC9oZWFkID4KPCBib2R5ID4KICAgIDxwIGlkPSJkZW1vIj5Jbml0aWFsIFRleHQ8L3A+CiAgICA8IHNjcmlwdCA+CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RlbW8nKS5pbm5lclRleHQgPSAnVXBkYXRlZCBieSBKYXZhU2NyaXB0ISc7CiAgICA8IC9zY3JpcHQgPgo8IC9ib2R5ID4KPCAvaHRtbCA+[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Assignment: Secure a Web Page with a Password

    Problem Statement

    Create a web page that prompts the user for a password. If the password is correct, display a welcome message; otherwise, deny access.

    Requirements

    1. Use a <script> tag for JavaScript.
    2. Use a prompt to get user input.
    3. Compare the input against a pre-defined password.
    4. Display messages using alert.

    Starter Template

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjwgaHRtbCA+CjwgaGVhZCA+CiAgICA8dGl0bGU+UGFzc3dvcmQgUHJvdGVjdGlvbjwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8IHNjcmlwdCA+CiAgICAgICAgLy8gV3JpdGUgeW91ciBKYXZhU2NyaXB0IGhlcmUKICAgIDwgL3NjcmlwdCA+CjwgL2JvZHkgPgo8IC9odG1sID4=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Answer Key

    Here’s a possible solution:

    [/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCAhRE9DVFlQRSBodG1sID4KPCBodG1sID4KPCBoZWFkID4KICAgIDx0aXRsZT5QYXNzd29yZCBQcm90ZWN0aW9uPC90aXRsZT4KPCAvaGVhZCA+CjwgYm9keSA+CiAgICA8IHNjcmlwdCA+CiAgICAgICAgY29uc3QgY29ycmVjdFBhc3N3b3JkID0gIkdhYmJhR2FiYmFIZXkiOwogICAgICAgIGxldCB1c2VyUGFzc3dvcmQgPSBwcm9tcHQoIkVudGVyIHRoZSBwYXNzd29yZDoiKTsKICAgICAgICAKICAgICAgICBpZiAodXNlclBhc3N3b3JkID09PSBjb3JyZWN0UGFzc3dvcmQpIHsKICAgICAgICAgICAgYWxlcnQoIkFjY2VzcyBHcmFudGVkISBXZWxjb21lISIpOwogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIGFsZXJ0KCJBY2Nlc3MgRGVuaWVkLiBJbmNvcnJlY3QgUGFzc3dvcmQuIik7CiAgICAgICAgfQogICAgPCAvc2NyaXB0ID4KPCAvYm9keSA+CjwgL2h0bWwgPg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

    Key Concepts Practiced

    1. Using variables to store the correct password.
    2. Using prompt to get user input.
    3. Using if-else for conditional logic.
    4. Using alert to display messages.

    Assignment for Practice

    1. Modify the above program to allow three attempts for the user to enter the correct password.
    2. If the password is incorrect after three attempts, display a final “Access Denied” message.

    [/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]


    Related Videos:

    Related Posts:

    Learn about JavaScript ELSE STATEMENTS

    Using CSS classes and the class attribute

    Introduction to JavaScript – Data Types

    Introduction to JavaScript – Create a Variable: let

    Learn Modules and Packages in Python programming

    [/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]